Como Criar Apps Flutter com Python e Flet?

Você sabe como criar apps Flutter com Python e Flet? Nesta aula vou te ensinar como construir do zero um app usando esses recursos.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Fala Impressionadores! Você já ouvir falar em Flutter ou Flet? Hoje eu quero te mostrar como criar apps Fullter com Python e Flet.

Isso mesmo, você vai aprender a criar seu primeiro aplicativo com Flet utilizando o Python.

A ideia aqui é instalar o framework Flet para ser possível criar um aplicativo Flutter utilizando o Python.

Isso quer dizer que esse código em Python vai ser transformado para poder criar seu aplicativo de uma forma bem mais fácil.

Além disso a grande vantagem do Flet é que o seu aplicativo ele é responsivo, então você não vai precisar criar um aplicativo para cada plataforma ou alterar um elemento em cada plataforma quando precisar fazer suas mudanças!

E aí, está curioso para fazer como criar aplicativo com Flet no Python?

Então vem comigo que eu vou te mostrar o passo a passo para criar o seu primeiro app!

O que é Flutter?

O Flutter é uma ferramenta que o Google construiu e o objetivo dele é que você possa criar aplicativos que rodem em qualquer tela de forma eficiente.

O que é Flet?

O Flet é um framework, uma ferramenta construída para facilitar a criação de aplicativos do Flutter.

Poque ambos foram criados?

O que costuma acontecer nas empresas que trabalham desenvolvendo soluções, é que, quando uma solução é desenvolvida ela tem que ser adaptada para diversos tipos de telas e formatos, estamos falando de construir um app para Android, um app para tablet, um programa para desktop, um site, etc.

Se após pronto o projeto necessitar de qualquer ajuste e este ajuste pode ser um simples botão, todos os outros projetos derivados deste tem que ser reabertos também para receber aquela atualização.

Com o Flutter esse trabalho e retrabalho são economizados, pois sua proposta é justamente trabalhar com uma única tela que se adapta a todos os formatos.

Como usar o Flutter?

O Flutter possui uma linguagem de programação, para você aplicar precisa ter conhecimento em Dart, e é aqui que entra a Flet. O Flet é uma forma de compilar os códigos escritos em Python para Dart.

Com ele não é necessário que você saiba Dart, você pode fazer todo o seu código em Python e usar o Flutter normalmente, apenas compilando no Flet.

É sobre esta aplicação que vou te ensinar hoje, recomendo que você entre no site do Flet e leia a documentação para entender melhor os conceitos.

Vamos usar este código abaixo para entender como funciona essa ferramenta:

import flet as ft

def main(pagina: ft.Page):

    pagina.title = "Meu app flet"

    pagina.vertical_alignment = ft.MainAxisAlignment.CENTER

    def diminuir(e):

        caixa_texto.value = str(int(caixa_texto.value) - 1)

        pagina.update()

    def somar(e):

        caixa_texto.value = str(int(caixa_texto.value) + 1)

        pagina.update()

    # criar os itens que queremos na página

    botao_menos = ft.IconButton(ft.icons.REMOVE, on_click=diminuir)

    caixa_texto = ft.TextField(value="0", width=100, text_align=ft.TextAlign.CENTER)

    botao_mais = ft.IconButton(ft.icons.ADD, on_click=somar)

    # adicinar os itens na página

    pagina.add(

        ft.Row([botao_menos, caixa_texto, botao_mais], alignment=ft.MainAxisAlignment.CENTER)

    )

ft.app(target=main, view=ft.WEB_BROWSER)

Abra seu terminal e instale o Flet para começarmos

>pip install flet

Importe para o seu código dando um apelido para o Flet, neste caso ft:

import flet as ft

Feito isso, para que o seu aplicativo exista, ele deve ter uma página, para criar essa página vamos criar uma função:

def main(pagina: ft.Page):

Essa função vai receber uma página e ela precisa ser do tipo ft.Page, isso vai facilitar muito mais a frente quando você precisar fazer o debug, por exemplo.

Para rodar o arquivo você deve informar ao código qual função ele vai executar para colocar o aplicativo no ar.

ft.app(target=main)

Se você rodar o arquivo não vai aparecer nada além de uma página em branco neste momento, mas Já podemos ver uma janela bonita em branco, já conseguimos também dimensionar ela sem nenhum problema.

Se quiser ver a janela na Web, existe na documentação um código disponível para fazer essa visualização.

import flet as ft

def main(pagina: ft.Page):

        Pass

ft.app(target=main, view=ft.WEB_BROWSER)

Mudando o comando e rodando o código vamos ver a página se abrir na Web. Todos os códigos que você for colocar vão ficar dentro dessa estrutura.

import flet as ft

def main(pagina: ft.Page):

        Pass

ft.app(target=main)

A primeira coisa que vamos fazer é colocar um título no nosso aplicativo

import flet as ft

def main(pagina: ft.Page):

        pagina.title = “Meu app flet”

ft.app(target=main)

Feito isso vamos definir como os itens da página vão ficar alinhados, vamos colocar o eixo principal alinhado ao centro:

import flet as ft

def main(pagina: ft.Page):

        pagina.title = “Meu app flet”

        pagina.vertical_alignment = ft.MainAxisAlignment.Center

ft.app(target=main)

Agora precisamos criar os itens que queremos na página e depois temos que adicionar os itens na página.

Para criar o botão vamos usar um código chamado IconButton e para criar uma caixa de texto vamos usar o código TextField.

Dentro dos parênteses após estes códigos vamos personalizar esses itens, tanto os botões quanto a caixa de texto.

Exemplo:

# criar os itens que queremos na página

botão_menos = ft.IconButton(ft.icons.REMOVE, on_click=diminuir)

caixa_texto = ft.TextField( )

botão_menos = ft.IconButton(ft.icons.ADD, on_click=somar)

Dentro dos parênteses estamos colocando a função do botão, neste caso um é para remover e o outro adicionar.

Em seguida temos o on_click que representa um evento, este evento vai ter como consequência uma ação, esta ação de somar e diminuir serão as ações (funções) que vamos ter que criar.

Vamos fazer primeiro a edição da nossa caixa de texto e depois podemos nos concentrar somente nas funções.

Nossa caixa de texto vai iniciar com o valor zero, vamos colocar também a largura da caixa de texto e o alinhamento:

# criar os itens que queremos na página

botão_menos = ft.IconButton(ft.icons.REMOVE, on_click=diminuir)

caixa_texto = ft.TextField(value=”0”, width=100, text_align=ft.text_align.CENTER)

botão_menos = ft.IconButton(ft.icons.ADD, on_click=somar)

pagina.add()

Feito isso vamos adicionar o botão na nossa página para isso vamos usar a linha de código pagina.add, pagina é o nome da variável que criamos mais acima no código, por isso vamos chamar por ela.

pagina.add(

        []

)

Dentro desta estrutura vamos colocar os botões e caixa de texto, porém, esses botões vão ficar dispostos um abaixo do outro se nós não ajustarmos o alinhamento deles, nosso objetivo é que um botão esteja um ao lado do outro.

Para isso vamos adicionar uma linha dentro do código e dentro desta linha vamos colocar os botões, assim fica muito mais simples de organizar.

pagina.add(

        ft.Row(

        [botão_menos,

        Caixa_texto,

        Botão_mais]

)

)

Podemos decidir aqui o local onde esta linha vai estar, se a direita, esquerda ou no centro da tela.

pagina.add(

        ft.Row(

        [botão_menos,

        Caixa_texto,

        Botão_mais], alignment=ft.MainAxisAlignment.CENTER

)

)

Se rodarmos o código agora vamos ter os botões na tela, mas ainda sem funcionamento.

Para que os botões tenham funcionamento na tela precisamos terminar as funções, elas serão responsáveis pela ação da página.

def diminuir():

        pass

def somar():

        pass

Na função vamos passar o valor que temos dentro da caixa de texto segundo a documentação, se o valor for 5 vamos passar o valor para número inteiro, diminuir 1 deste valor e posteriormente transformar o valor em texto novamente, vamos fazer isso em apenas uma linha de código.

Exemplo da lógica usada:

def diminuir():

        caixa_texto.value = str()

#lógica -> “5” caixa_texto.value -> int -> diminuir 1 -> transformar em texto

Resultado

def diminuir():

        caixa_texto.value = str(int(caixa_texto.value) -1)

Após fazermos uma edição temos também que fazer uma atualização na página, assim não é necessário dar F5 na tela de forma manual, vamos colocar uma linha para atualização no código.

def diminuir():

        caixa_texto.value = str(int(caixa_texto.value) -1)

        pagina.update()

def somar():

caixa_texto.value = str(int(caixa_texto.value) +1)

        pagina.update()

Feito isso podemos rodar o código usando o no terminal ou passando o parâmetro que já havíamos visto para rodar no Web, você vai ver que os botões e comandos já funcionarão normalmente sem a necessidade de atualizar a página!

Conclusão – Como Criar Apps Flutter com Python e Flet

Você já sabia como o que é Flet ou Flutter? Preparei esta aula para esclarecer o que são essas duas aplicações, como trabalham e porque vale a pena utilizar.

Além disso, construímos um aplicativo simples que pode ser executado em diversas frentes como aplicativo androide, web, tablet, etc.

Uma dica que sempre é bom ressaltar sobre essas aplicações é a leitura da biblioteca, assim você poderá fazer aplicativos mais robustos do que este que fizemos em pouquíssimas linhas de código.

Eu fico por aqui! Espero que gostem! Um abraço,

Hashtag Treinamentos

Para acessar outras publicações de Python, clique aqui!

Raquel Araújo

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.