Flet, exemplos 1
Usando métodos para alterar propriedades de widgets
Os valores de propriedades dos widgets (exceto aqueles que são de leitura somente) podem ser alterados dinamicamente pelo código e por ação do usuário. O código abaixo, além de inserir cidades previamente digitadas em uma lista, permite que usário insira novos nomes.
1 import flet as ft 2 import time 3 4 def main(page=ft.Page): 5 def inserir(e): 6 txt = txt_cidade.value.strip() 7 if txt: 8 page.controls.append(ft.Text(txt)) 9 txt_cidade.value = "" 10 page.update() 11 12 page.add(ft.Row([ft.Text("Estas são cidades brasileiras")])) 13 txt_cidade = ft.TextField(label="Sua cidade") 14 page.add( 15 ft.Row([ 16 txt_cidade, 17 ft.ElevatedButton(text="Insira o nome de sua cidade!", on_click=inserir) 18 ]) 19 ) 20 cidades = ["Belo Horizonte","Curitiba","São Paulo","Salvador","----------"] 21 for i in range(len(cidades)): 22 page.add(ft.Text(cidades[i])) 23 time.sleep(.5) 24 25 ft.app(target=main)
![](https://phylos.net/wp-content/uploads/2023/12/exemplo1.jpg)
Na linha 17 atribuímos uma função ao evento on_click do botão. Essa função é disparada com o clique, enviando o parâmetro e
que tem várias propriedades, não utilizadas aqui. A função inserir(e)
coleta o conteúdo de txt_cidade, a caixa de texto definida na linha 16, remove espaços em branco nas bordas da string, testa se ela é uma string não vazia e, se não for, cria e insere um texto na página com o conteúdo digitado pelo usuário. Lembrando, na linha 7, if txt
só retorna falso se txt for uma string vazia. A execução desse código produz o resultado mostrado na figura 1, após a inserção de nova cidade pelo usuário.
Alterando texto e cores de botões
Outro exemplo abaixo mostra dois botões associados a métodos diferentes, com a capacidade de alterar as propriedades do outro botão.
1 import flet as ft 2 import random 3 4 def main(page: ft.Page): 5 cores = {0:"black", 1:"#1D74FF", 2:"#C51709", 3:"#FFE000", 4:"#00CB4F", 6 5:"#A866DC", 6:"#FF6600", 7:"green", 8:"#145375"} 7 8 def mudar(e): 9 bt2.disabled = not bt2.disabled 10 bt2.text = "Mudar cor: desabilitado" if bt2.disabled else "Mudar cor: habilitado" 11 bt1.text="Habilitar" if bt2.disabled else "Desabilitar" 12 page.update() 13 14 def mudar_cor(e): 15 bt1.bgcolor = cores[random.randrange(0,8)] 16 page.update() 17 18 bt1 = ft.FilledButton(text="Desabilitar", width=250, on_click=mudar) 19 bt2 = ft.ElevatedButton("Mudar cor: habilitado", disabled=False, width=250, on_click=mudar_cor) 20 page.add(ft.Row([bt1, bt2])) 21 22 ft.app(target=main)
Um clique no botão 2 muda a cor do botão 1 escolhendo aleatóriamente entre as cores do dicionário cores. Cliques no botão 1 alternam a habilitação do botão 2.
![](https://phylos.net/wp-content/uploads/2023/12/exemplo2.jpg)
Fontes, pés de página e referências a widgets
No próximo exemplo definimos duas fontes (de caracteres) para uso no aplicativo, que denominamos respectivamente por Kanit e Karma. A propriedade page.fonts é um dicionário com o nome e local do recurso, a primeira definida como um recurso externo por meio de uma URL, a segunda um recurso interno, na máquina onde roda o aplicativo, explicado abaixo.
A linha 68 define um flet.BottomSheet, uma janela modal (que impede a ação sobre outras partes do aplicativo), que pode ser usada como uma alternativa para uma janela modal ou de menu.
1 import flet as ft 2 3 def main(page: ft.Page): 4 5 page.title="Exibindo notas ocultas" 6 page.fonts = { 7 "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf", 8 "Karma": "fonts/Karma-Regular.ttf", 9 } 10 page.theme = ft.Theme(font_family="Kanit") 11 page.update() 12 13 def exibe_mensagem(txt): 14 mensagem.value=txt 15 mensagem.update() 16 17 def traduzir(e): 18 bt2.data = (bt2.data + 1)%2 19 conteudo.current.value = texto_nota[bt2.data] 20 page.update() 21 22 def bs_fechado(e): 23 exibe_mensagem("A nota foi ocultada por clique fora de sua área.") 24 25 def mostrar_pe(e): 26 bs.open = True 27 bs.update() 28 exibe_mensagem("A nota está exibida.") 29 30 def ocultar_pe(e): 31 bs.open = False 32 bs.update() 33 exibe_mensagem("A nota foi ocultada por clique no botão interno.") 34 35 def fechar_app(e): 36 page.window_destroy() 37 38 texto_nota=[( 39 'The Selfish Gene is a 1976 book on evolution by ethologist Richard Dawkins, in ' 40 'which the author builds upon the principal theory of George C. Williams\'s ' 41 'Adaptation and Natural Selection (1966). Dawkins uses the term "selfish gene" as ' 42 'a way of expressing the gene-centred view of evolution (as opposed to the views ' 43 'focused on the organism and the group), popularising ideas developed during the ' 44 '1960s by W. D. Hamilton and others.' 45 ), 46 ( 47 'O Gen Egoísta é um livro de 1976 sobre evolução do etólogo Richard Dawkins, no ' 48 'qual o autor se baseia na teoria principal de Adaptação e Seleção Natural de ' 49 'George C. Williams (1966). Dawkins usa o termo "gene egoísta" como forma de ' 50 'expressar a visão da evolução centrada no gene (em oposição às visões focadas no ' 51 'organismo e no grupo), popularizando ideias desenvolvidas durante a década de ' 52 '1960 por W. D. Hamilton e outros.' 53 )] 54 55 bt1=ft.ElevatedButton("Fechar a nota", on_click=ocultar_pe) 56 bt2=ft.ElevatedButton("Traduzir", data=0, on_click=traduzir) 57 bt3=ft.ElevatedButton("Exibir pé de página", on_click=mostrar_pe) 58 bt4=ft.ElevatedButton("Fechar Aplicativo", on_click=fechar_app) 59 60 mensagem=ft.Text("A nota não está exibida.", font_family="Karma", size=20) 61 conteudo=ft.Ref[ft.Text()]() 62 coluna_texto=ft.Column([ft.Text(ref=conteudo), ft.Row([bt1, bt2])]) 63 conteudo.current.font_family="Karma" 64 conteudo.width=600 65 conteudo.current.size=20 66 conteudo.current.value = texto_nota[0] 67 68 bs = ft.BottomSheet(ft.Container(coluna_texto, padding=50), open=False, on_dismiss=bs_fechado) 69 70 page.overlay.append(bs) 71 page.add( 72 ft.Text("Clique no botão para exibir a nota oculta", size=30), 73 mensagem, 74 ft.Row([bt3, bt4]), 75 ) 76 77 ft.app(target=main, assets_dir="assets")
![](https://phylos.net/wp-content/uploads/2023/12/fontes.jpg)
A linha 77, que inicializa o aplicativo do flet, informa que estamos usando o diretório de recursos assets_dir=”assets”, onde podemos armazenar imagens, fontes e outros recursos. No caso do atual aplicativo o diretório code é a pasta raiz, de onde o código será executado. A fonte local Karma-Regular.ttf está gravada em code/assets/fonts/Karma-Regular.ttf, como mostrado na figura 3. Ela é inserida no dicionário page.fonts da linha 6 e utilizada nas linhas 60 e 63. A outra fonte é definida como padrão do aplicativo na linha 10.
A linha 68 inicializa o bs = BottomSheet, inicialmente fechado (invisível). Esse widget é exibido com o clique do botão bt3 (linha 57) e fechado com bt4 (linha 58). O BottomSheet é inserido na página com page.overlay.append(bs) (70). page.overlay é uma lista de controles que são exibidos por cima dos demais controles da página. O botão bt2 (traduzir) altera a exibição do texto em conteudo, escolhendo entre os dois textos armazenados na lista texto_nota. O índice do texto exibido a cada momento está armazenada na propriedade bt2.data.
Outro ponto digno de nota é o uso da referência para um controle usada na linha 61 em conteudo=ft.Ref[ft.Text()](). A classe Ref permite que se defina uma referência para um controle. No cao a referência é feita ao controle de texto associado à variável conteudo. Essa referência permite o uso posterior das propriedades e eventos do controle. Para lidar mais tarde com esse controle usamos a propriedade current como é feito nas linhas 66 e 19.
O resultado desse código ao ser executado é mostrado na figura 4, antes de pressionado o botão Exibir pé de página. A figura 5 exibindo o texto em inglês após pressionamento do botão. Um texto alternativo, em português é exibido quando se clica em Traduzir.
![](https://phylos.net/wp-content/uploads/2023/12/Traduzir1.jpg)
![](https://phylos.net/wp-content/uploads/2023/12/Traduzir2.jpg)