Construindo Aplicações Multiplataforma com Python: Um Guia Básico de Início Rápido com Flet

Autor: Hebert Aragão

Introdução ao Flet

O Flet é um framework inovador que permite a desenvolvedores Python criar aplicações em tempo real para web, desktop e mobile, tudo a partir de uma única base de código. Sua principal vantagem é a capacidade de construir interfaces de usuário (UI) ricas e modernas sem a necessidade de conhecimento prévio em tecnologias frontend como HTML, CSS ou JavaScript.

O Flet utiliza o poder do Flutter (o framework de UI do Google) sob o capô, combinando a facilidade de desenvolvimento em Python com a beleza e a performance nativa do Flutter. Isso o torna uma excelente escolha para:

●      Projetos Internos e Ferramentas: Criar rapidamente ferramentas de uso interno com interfaces gráficas.

●      Protótipos: Desenvolver protótipos de aplicativos com agilidade.

●      Aplicações Multiplataforma: Garantir que seu aplicativo funcione de forma consistente em Windows, macOS, Linux, Web e dispositivos móveis.

Pré-requisitos e Instalação

Para começar a usar o Flet, você só precisa ter o Python 3.8 ou superior instalado em seu sistema.

1. Configuração do Ambiente Virtual (venv)

É uma prática recomendada em Python utilizar um ambiente virtual para isolar as dependências do seu projeto. Isso garante que as bibliotecas instaladas para o Flet não interfiram em outros projetos ou no seu sistema operacional.

Passo 1: Criar o Ambiente Virtual

Abra o terminal na pasta do seu projeto e execute o comando:

python3 -m venv venv

Passo 2: Ativar o Ambiente Virtual

O comando para ativar o ambiente virtual varia de acordo com o seu sistema operacional:

Sistema Operacional Comando de Ativação

Windows (Command Prompt) venv\Scripts\activate.bat

Windows (PowerShell) venv\Scripts\Activate.ps1

Linux/macOS source venv/bin/activate

Após a ativação, o nome do seu ambiente (venv) aparecerá no início da linha de comando, indicando que você está no ambiente isolado.

2. Instalação do Flet

Com o ambiente virtual ativado, a instalação do framework Flet é feita de maneira simples e direta através do gerenciador de pacotes pip:

pip install flet

Com isso, o Flet e suas dependências serão instalados apenas dentro do seu ambiente virtual, mantendo seu sistema limpo.

Criando um Projeto Estruturado com flet create

Para projetos maiores, o Flet oferece um comando de linha de interface (CLI) para criar uma estrutura de projeto organizada: o flet create.

Para criar um novo projeto chamado meu_app_flet, você pode usar o seguinte comando no seu terminal:

flet create meu_app_flet

Este comando irá gerar uma estrutura de diretórios básica, que inclui:

Arquivo/Diretório Descrição

meu_app_flet/ Diretório raiz do projeto.

pyproject.toml Arquivo de configuração do projeto (dependências, etc.).

src/ Contém o código-fonte principal.

src/main.py O ponto de entrada da sua aplicação Flet.

storage/ Diretório para dados temporários ou persistentes.

Configurando o Projeto no VS Code

Para uma experiência de desenvolvimento ideal, especialmente no Visual Studio Code (VS Code), siga estas etapas:

1. Abra a Pasta: No VS Code, vá em Arquivo > Abrir Pasta e selecione o diretório meu_app_flet que você acabou de criar.
2. Selecione o Interpretador Python: É altamente recomendável usar um ambiente virtual. No VS Code, abra a Paleta de Comandos (Ctrl+Shift+P ou Cmd+Shift+P), digite "Python: Select Interpreter" e escolha o interpretador do seu ambiente virtual.
3. Instale a Extensão Flet: Procure pela extensão oficial do Flet no Marketplace do VS Code. Ela pode oferecer recursos como syntax highlighting e atalhos de execução.
4. Execute o Projeto: O arquivo src/main.py gerado já contém um código básico. Para executá-lo, você pode usar o terminal integrado do VS Code e rodar o comando:

flet run src/main.py

Isso iniciará seu aplicativo Flet, permitindo que você comece a desenvolver imediatamente.

Criando Componentes Customizados: O Template extension

Para desenvolvedores que desejam criar seus próprios componentes reutilizáveis (Controles Customizados) ou integrar pacotes Flutter de terceiros, o Flet oferece um template específico.

O comando completo para iniciar um projeto de extensão é:

flet create meu_componente --project-name "Minha Extensão" --description "Um componente customizado em Flet" --template extension

Detalhamento do Comando

Parâmetro Descrição Exemplo no Comando

meu_componente O nome do diretório onde o projeto será criado. meu_componente

--project-name O nome formal do projeto, usado em arquivos de configuração. "Minha Extensão"

--description Uma breve descrição do projeto. "Um componente customizado em Flet"

--template Especifica o tipo de projeto a ser criado. extension

Estrutura do Projeto de Extensão

Ao usar o template extension, a estrutura de diretórios gerada é otimizada para o desenvolvimento de componentes, separando o código do componente do código de exemplo que o utiliza.

Arquivo/Diretório Propósito

meu_componente/ Diretório raiz do projeto.

pyproject.toml Metadados do pacote Python e dependências.

src/ Contém o código-fonte do seu componente customizado.

src/meu_componente.py Onde você implementará a lógica do seu novo controle Flet.

example/ Contém um aplicativo Flet de exemplo para testar seu componente.

example/main.py, O aplicativo de teste que importa e usa seu componente.

Configuração e Execução no VS Code (Windows 11)

A experiência de desenvolvimento no Visual Studio Code em um ambiente Windows 11 é fluida e segue as melhores práticas de Python.

1. Abra a Pasta: Abra o diretório meu_componente no VS Code.
2. Desenvolvimento: Edite o arquivo src/meu_componente.py para criar seu componente e o example/main.py para testá-lo.
3. Execução: Para ver seu componente em ação, execute o aplicativo de exemplo no terminal integrado do VS Code:

flet run example/main.py

A imagem a seguir ilustra o ambiente de desenvolvimento no VS Code, pronto para executar o projeto de extensão:

Com o template extension, o Flet simplifica a criação e distribuição de componentes customizados, permitindo que a comunidade Python expanda o ecossistema Flet com facilidade.

Criando Nosso Primeiro Projeto: Um Contador Simples

Para demonstrar a facilidade de uso do Flet, vamos criar um aplicativo de contador simples. Este projeto básico ilustra a estrutura fundamental de um aplicativo Flet, incluindo a criação de controles (widgets) e a manipulação de eventos.

O objetivo é ter uma interface limpa com um campo de texto exibindo um número e dois botões (um para decrementar e outro para incrementar).

O Código (counter_app.py)

Para o nosso exemplo de contador, vamos criar um arquivo chamado counter_app.py (ou você pode usar o src/main.py do projeto criado com flet create) e insira o seguinte código:

import flet as ft

def main(page: ft.Page):

   # 1. Configuração da Página

   page.title = "Contador Simples com Flet"

   page.vertical_alignment = ft.MainAxisAlignment.CENTER

   # 2. Criação do Controle de Texto (o contador)

   txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

   # 3. Funções de Manipulação de Eventos

   def minus_click(e):

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

       page.update() # Atualiza a UI para refletir a mudança

   def plus_click(e):

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

       page.update() # Atualiza a UI para refletir a mudança

   # 4. Adição dos Controles à Página

   page.add(

       ft.Row(

           [

               ft.IconButton(ft.icons.REMOVE, on_click=minus_click),

               txt_number,

               ft.IconButton(ft.icons.ADD, on_click=plus_click),

           ],

           alignment=ft.MainAxisAlignment.CENTER,

       )

   )

# 5. Inicialização do Aplicativo

ft.app(target=main)

Entendendo o Código

O código acima pode ser dividido em cinco partes principais:

1. Importação e Configuração da Página:

●      import flet as ft: Importa o framework Flet.

●      def main(page: ft.Page):: A função main é o ponto de entrada do seu aplicativo. Ela recebe um objeto page (do tipo ft.Page), que representa a janela principal da aplicação.

●      page.title e page.vertical_alignment: Definem o título da janela e centralizam o conteúdo verticalmente.

1. Criação de Controles:

●      ft.TextField: Cria um campo de texto. Note que o Flet usa o prefixo ft. para todos os seus controles (widgets).

1. Funções de Manipulação de Eventos:

●      minus_click(e) e plus_click(e): São funções Python comuns que modificam a propriedade value do txt_number.

●      page.update(): Crucial. É o que informa ao Flet que houve uma mudança no estado da UI e que a tela precisa ser redesenhada.

1. Estrutura da UI:

●      page.add(...): Adiciona um controle à página.

●      ft.Row(...): Um controle de layout que organiza seus filhos horizontalmente. Usamos ele para agrupar os botões e o campo de texto.

●      ft.IconButton(...): Cria um botão de ícone. O parâmetro on_click associa a função de manipulação de evento ao clique do botão.

1. Inicialização:

●      ft.app(target=main): Inicia o aplicativo Flet, passando a função main como o alvo a ser executado.

Executando a Aplicação

Com o arquivo counter_app.py salvo, ou após modificar o src/main.py do seu projeto, você pode executá-lo a partir do terminal:

flet run counter_app.py

Por padrão, o Flet tentará abrir o aplicativo em uma janela nativa do seu sistema operacional. Se você quiser executá-lo como um aplicativo web (que pode ser acessado via navegador), basta adicionar a flag --web:

flet run --web counter_app.py

Conclusão

O Flet simplifica drasticamente o desenvolvimento de aplicações com interface gráfica em Python, permitindo que desenvolvedores foquem na lógica de negócios sem se prenderem às complexidades do frontend. Com apenas algumas linhas de código, como visto no exemplo do contador, é possível criar aplicações interativas e visualmente agradáveis, prontas para serem implantadas em múltiplas plataformas. Comece a explorar a vasta biblioteca de controles do Flet e leve seus projetos Python para o próximo nível!