Controle Badge

O controle Badge (um distintivo ou emblema) é uma marca posta acima de outro controle, usada ​​para mostrar notificações, contagens ou informações de status sobre o aplicativo. O controle que recebe um Badge é normalmente um ícone, parte de um NavigationBar ou um destino de NavigationRail, ou um ícone de botão. O controle tem a propriedade text onde as informações podem ser exibidas. Se text é fornecido, o rótulo será um emblema em forma de StadiumBorder com altura large_size. Se nenhum texto for fornecido, o emblema será exibido como um círculo preenchido de diâmetro small_size.

Propriedades de Badge

As seguintes propriedades existem no controle Badge:

Você pode ver um exemplo de uso do controle Bagde.

Controle Canvas

O controle Canvas serve para que sejam desenhados gráficos arbitrários, usando um conjunto de formas primitivas como line, arc, path e text, respectivamente linha, arco, caminho, e texto.

Propriedades do Canvas

As seguintes propriedades estão definidas do controle Canvas:

Evento do Canvas

O seguinte evento pode ser acionado no Canvas:

Propriedades das Formas (Shapes)

Nesse contexto chamamos as Shapes de formas, Path de caminhos, as partes de um caminho de subcaminhos.

As formas básicas (Shapes) usadas pelo Canvas são: Arc, Circle, Color, Fill, Line, Oval, Path, Points, Rect, Shadow, Text, respectivamente: Arco, círculo, cor, preenchimento, linha, oval, caminho, ponto, retângulo, sombra, texto.

Um Arc é o elemento que desenha um arco dimensionado para caber dentro do retângulo disponível. O arco vai no sentido horário de start_angle até start_angle + sweep_angle (em radianos, com zero mostrado na figura 2). Se use_center=True, o arco é fechado de volta ao centro. Caso contrário, o arco fica aberto.

Uso: canvas.Arc(x, y, width, height, start_angle, sweep_angle, use_center, paint)

Um Circle desenha um círculo dentro do canvas.
Uso: canvas.Circle(x,y,radius, paint)

Color pinta uma cor na tela, usando o blend_mode fornecido. A cor fornecida é a origem e o fundo o destino.
Uso: canvas.Color(color, blend_mode)

Um Fill preenche a tela com o Paint dado (definido abaixo). Para preencher a tela com cor sólida e modo de mesclagem, considere usar forma Color.
Uso: canvas.Fill(paint)

Line desenha uma linha entre os pontos dados usando paint. A linha é traçada e o valor do Paint.style é ignorado.
Uso: canvas.Line(x1, y1, x2, y2, paint)

Oval desenha uma figura oval (uma elipse) usando o Paint dado. A oval pode ser preenchida ou traçada (ou ambos), o que é controlado por Paint.style.

Uso: canvas.Oval(x, y, width, height, paint)

Path desenha um caminho com elementos fornecidos por Paint. A forma pode ser preenchida ou traçada (ou ambos), e isso é controlado por Paint.style. Se Path for preenchido, os subcaminhos serão implicitamente fechados (veja Path.Close).
Uso: canvas.Path(elements, paint)

A tabela abaixo lista os possíveis elementos de Path:

Nota: †: Uma curva de Bezier é uma curva parametrizada que representa a interpolação linear entre os chamados pontos de controle. Normalmente, ela tem como objetivo aproximar uma forma que não tem representação matemática explícita ou com representação desconhecida ou complicada. Ela é usada principalmente em aplicações gráficas computadorizadas.

Points é o elemento que desenha uma sequência de pontos de acordo com o point_mode dado.

Rect desenha um retângulo.

Uso: canvas.Rect(x, y, width, height, border_radius, paint)

Desenha uma sombra sob um caminho, representada com uma elevação elevation.

Uso: canvas.Shadow(color, elevation, path, transparent_occluder)

Text renderiza elemento de texto com style dado no ponto (x, y).

Uso: canvas.Text(x, y, text, alignment, rotate)

Controle Appbar

O controle AppBar insere uma barra de aplicativos, às vezes chamada de barra de ação, na parte superior da página do Flet. Essa barra pode conter botões, menus dropdown e outros widgets que acionam ações desejados pelo usuário. A barra de aplicativos tem uma estrutura visual e elementos interativos familiares para os usuários.

Exemplo de Uso da Appbar

Um controle AppBar é aplicado à propriedade da página, page.appbar = app_barra. O código a seguir mostra um pequeno aplicativo que faz uso da Appbar.

import flet as ft

def main(page: ft.Page):
    page.bgcolor="#72BFDE"
    page.horizontal_alignment=ft.CrossAxisAlignment.CENTER

    def clicou_botao(e):
        texto.value += f"\nO ícone \"{e.control.icon}\" foi clicado"
        page.update()

    def clicou_check(e):
        e.control.checked = not e.control.checked
        insere = f"\nO {e.control.text} {'' if e.control.checked else 'não'} está selecionado!"
        texto.value += insere
        page.update()

    class Pop(ft.PopupMenuItem):
        def __init__(self, texto):
            super().__init__()
            self.text=texto
            self.checked=False
            self.on_click=clicou_check

    app_barra = ft.AppBar(
        leading=ft.IconButton(ft.icons.SOUTH_AMERICA, icon_color="white", on_click=clicou_botao),
        leading_width=40,
        title=ft.Text("AppBar: Barra de Aplicativo", color="white"),
        center_title=False,
        bgcolor="#8FD0DA",
        actions=[
            ft.IconButton(ft.icons.PODCASTS, icon_color="white", on_click=clicou_botao),
            ft.IconButton(ft.icons.CAR_REPAIR, icon_color="white", on_click=clicou_botao),
            ft.PopupMenuButton(
                items=[Pop("Item 1"), Pop("Item 2"), Pop(""), Pop("Item 3")],
                bgcolor="#A88413", icon_color="#ffffff"
            ),
        ],
    )

    titulo = ft.Text("Clique nos ícones ou menu dropdown", size=15, color="#333333")
    texto = ft.Text("", size=20, color=ft.colors.BLACK)

    page.appbar = app_barra
    page.add(
        ft.Text(
            "Lista de ações executadas:",
            size=30,
            color=ft.colors.BLACK
        ),
        ft.Container(
            content=ft.Column([titulo, texto]),
            padding=20,
            width=500, height=500,
            bgcolor=ft.colors.BLUE_100,
            border=ft.border.all(1, "#aaaaff")
        )
    )

ft.app(target=main)

A variável app_barra contém uma AppBar com ícones e um menu dropdown. Um clique em cada ícone ativa a função clicou_botao(e) que acrescenta uma linha de texto à variável texto que é um controle dentro do container na página.

Os cliques ativam as funções clicou_botao(e) e clicou_check(e) que recebem os objetos de eventos e (da classe ControlEvent). Esse objeto possui a propriedade .control que, por sua vez possui um dicionárioiconbutton, no caso do IconButton e popupmenuitem, no caso do PopupMenuButton. Os dois dicionários estão listados abaixo (para algum momento da execução):

• iconbutton = {‘icon’: ‘podcasts’, ‘iconcolor’: ‘white’, ‘n’: ‘action’}
• popupmenuitem = {‘text’: ‘Item 1’, ‘checked’: False}

Em execução o aplicativo é renderizado de acordo com a figura 1. A figura 1(a) mostra o estado inicial, com o PopupMenuButton clicado. A figura 1(b) representa o estado após um clique nos três ícones, seguidos de 2 cliques no item 1 do menu.

Propriedades de AppBar

As seguintes propriedades estão definidas para o controle AppBar:

Notas †:Semantics Um controle que leva uma anotação descrendo o significado do widget. Usado para acessibilidade, search engines e ferramentas de análise semântica.

Controle BottomAppBar

O controle BottomAppBar é similar ao AppBar mas disposto no fundo da página do aplicativo.

Propriedades de BottomAppBar

As seguintes propriedades estão definidas para o controle BottomAppBar:

Nota: †: Notch ou entalhe é o recorte usado para acomodar componentes na parte superior frontal na tela dos smartphones.

Exemplo de Uso da BottomAppbar

Um controle BottomAppBar é aplicado à propriedade da página, page.bottom_appbar = barra_fundo. O código a seguir mostra um pequeno aplicativo que faz uso da BottomAppbar.

import flet as ft

def main(page: ft.Page):
    def clicou(e):
        texto.visible = not texto.visible
        page.update()

    page.horizontal_alignment = page.vertical_alignment = "center"
    page.floating_action_button = ft.FloatingActionButton(icon=ft.icons.ADD, on_click=clicou)
    page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED

    page.bottom_appbar = ft.BottomAppBar(
        bgcolor=ft.colors.BLUE,
        shape=ft.NotchShape.CIRCULAR,
        content=ft.Row(
            controls=[
                ft.IconButton(icon=ft.icons.MENU, icon_color=ft.colors.WHITE),
                ft.Container(expand=True),
                ft.IconButton(icon=ft.icons.SEARCH, icon_color=ft.colors.WHITE),
                ft.IconButton(icon=ft.icons.FAVORITE, icon_color=ft.colors.WHITE),
            ]
        ),
    )

    texto = ft.Text(
        (
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit,\n'
        'sed do eiusmod tempor incididunt ut labore et dolore magna\n'
        'aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n'
        'ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n'
        'Duis aute irure dolor in reprehenderit in voluptate velit\n'
        'esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n'
        'occaecat cupidatat non proident, sunt in culpa qui officia\n'
        'deserunt mollit anim id est laborum.'
        ),
        size=15, color=ft.colors.WHITE
    )

    page.add(texto)

ft.app(target=main)

A figura 2 mostra a execução do aplicativo. Cliques no botão FloatingActionButton (com o ícone +) ocultam / exibem a texto centralizado na página.

Versões Estilizadas para IOS

Dois controles análogos estão disponíveis com o estilo iOS:

• Uma barra de aplicativos no estilo de apps iOS: CupertinoAppBar.
• Uma barra de navegação de fundo no estilo de apps iOS: CupertinoNavigationBar.

Um exemplo breve de uso está descrito a seguir:

import flet as ft

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.horizontal_alignment = page.vertical_alignment = "center"
    page.bgcolor="#F4F0BD"
    icone = ["Bússula", "Carros", "Bandeira"]

    def clicou(e):
        texto2.value += f"\nClicou no ícone {icone[e.control.selected_index]}"
        page.update()

    page.appbar = ft.CupertinoAppBar(
        leading=ft.Icon(ft.icons.PALETTE),
        bgcolor="#976A4E",
        trailing=ft.Icon(ft.icons.WB_SUNNY_OUTLINED),
        middle=ft.Text("Exemplo de CupertinoAppBar e CupertinoNavigationBar")
    )

    page.navigation_bar = ft.CupertinoNavigationBar(
        bgcolor="#4E7B97",
        inactive_color=ft.colors.GREY,
        active_color=ft.colors.BLACK,
        on_change=clicou,
        destinations=[
            ft.NavigationBarDestination(icon=ft.icons.EXPLORE, label="Bússula"),
            ft.NavigationBarDestination(icon=ft.icons.COMMUTE, label="Carros"),
            ft.NavigationBarDestination(
                icon=ft.icons.BOOKMARK_BORDER,
                selected_icon=ft.icons.BOOKMARK,
                label="Bandeira",
            ),
        ]
    )
    texto1 = ft.Text("Exemplo de Uso dos controles:\n\nCupertinoAppBar e CupertinoNavigationBar", size=18)
    texto2 = ft.Text("", size=20)
    page.add(texto1, texto2)

ft.app(target=main)

A figura 3 mostra a execução do aplicativo após cliques nos botões na barra de fundo.