Controle NavigationDrawer

O controle NavigationDrawer é um componente no estilo Material Design que desenha um painel similar ao NavigationBar mas que desliza horizontalmente da borda, da esquerda para a direita ou o inverso. Ela serve para apresentar destinos primários em um aplicativo. Uma NavigationDrawer é adicionada e removida da página com as propriedades page.drawer e page.end_drawer. Um controle NavigationDrawer pode ser adicionado a uma View, usando as propriedades View.drawer ou View.end_drawer.

Nesse texto chamaremos a drawer (literalmente, gaveta) de aba. Portanto o controle de navegação contem diversos controles de destinos que são abas.

Propriedades do NavigationDrawer

Propriedade	Descrição
bgcolor	cor de fundo do controle.
controls	lista de itens de menu que são os filhos do NavigationDrawer. Esses filhos são controles NavigationDrawerDestination ou alguns outros, como títulos e divisores.
elevation	elevação do controle.
indicator_color	cor do indicador de destino selecionado.
indicador_shape	forma do indicador de destino selecionado. O valor é do tipo OutlinedBorder.
position	posição dessa aba. O valor é do tipo NavigationDrawerPosition com default NavigationDrawerPosition.START.
selected_index	índice do NavigationDrawerDestination selecionado, ou nulo se nenhuma seleção foi feita.Se esse número for inválido (como -1), nenhum destino será selecionado.
shadow_color	cor da sombra usada para indicar elevação.
surface_tint_color	tom de cor da superfície (Material) que abriga o conteúdo do NavigationDrawer.
tile_padding	preenchimento para controles NavigationDrawerDestination.

Eventos do NavigationDrawer

Evento	Descrição
on_change	dispara na seleção de um destino.
on_dismiss	dispara quando a aba é descartada por ação de alhum outro controle ou clique fora da aba.

Uma NavigationDrawer recebe outros controles em sua propriedade NavigationDrawer.controls, que é um array. Em particular vários controles NavigationDrawerDestination podem ser inseridos, contendo ícones e labels. A seleção dos destinos é realizada no evento NavigationDrawer.on_change e a captura do índice do controlel clicado. Um evento também é disparado no fechamento da aba, com NavigationDrawer.on_change.

Propriedades de NavigationDrawerDestination

Propriedade	Descrição
bgcolor	cor do controle de destino.
icon	ícone do destino.
icon_content	controle dentro do ícone de destino. Geralmente é um controle Icon e é usado no lugar da propriedade icon. Se um selected_icon_content for fornecido ele só será exibido se o destino não for selecionado†.
label	rótulo de texto abaixo do ícone deste NavigationDrawerDestination.
selected_icon	ícone alternativo exibido quando o destino é selecionado.
selected_icon_content	controle de ícone alternativo exibido quando o destino é selecionado. Se este ícone não for fornecido, o NavigationDrawer exibe icon_content em qualquer estado.

† Nota: O manual do Flet sugere a escolha de um ícone com uma versão com traço e preenchida, como icons.CLOUD e icons.CLOUD_QUEUE, para tornar o NavigationDrawer mais acessível. O ícone deve ser definido para a versão com traço e selected_icon para a versão preenchida.

Exemplo de Uso do NavigationDrawer

import flet as ft

def main(page: ft.Page):
    page.bgcolor=ft.colors.BLUE_500

    def fechar_painel(e):
        mensagem.value+="\nAba dispensada"
        page.update()

    def clicar_destino(e):
        mensagem.value+=f"\nFoi selecionado o índice: {e.control.selected_index}"
        if e.control.selected_index==3:
            page.close(aba)
        page.update()

    aba=ft.NavigationDrawer(
        bgcolor=ft.colors.BLUE_600,
        on_dismiss=fechar_painel,
        on_change=clicar_destino,
        controls=[
            ft.Container(height=12),
            ft.NavigationDrawerDestination(
                label="Item 1",
                icon=ft.icons.AIRPLANEMODE_ON,
                selected_icon_content=ft.Icon(ft.icons.AIRPLANEMODE_INACTIVE),
            ),
            ft.NavigationDrawerDestination(
                icon_content=ft.Icon(ft.icons.AIRPLANE_TICKET),
                label="Item 2",
                selected_icon=ft.icons.AIRPLANE_TICKET_OUTLINED,
            ),
            ft.NavigationDrawerDestination(
                icon_content=ft.Icon(ft.icons.AIRPORT_SHUTTLE),
                label="Item 3",
                selected_icon=ft.icons.DEBLUR_SHARP,
            ),
            ft.Divider(thickness=2),
            ft.NavigationDrawerDestination(
                icon_content=ft.Icon(ft.icons.CHALET),
                label="Fechar Aba",
                selected_icon=ft.icons.PHONE,
            ),
            ft.NavigationDrawerDestination(
                label="Feche a aba clicando no ícone\n ou fora da aba"
            ),
        ],
    )
    mensagem=ft.Text("Suas ações serão vistas aqui:\n", color=ft.colors.BLACK)
    centro=ft.Container(
        content=mensagem,
        margin = ft.margin.only(left=300, top=0, right=0, bottom=0),
        padding=30,
        width=300,
        height=230,
        border_radius=10,
        bgcolor=ft.colors.AMBER_100,
    )
    page.add(
        ft.ElevatedButton("Exibir drawer", on_click=lambda e: page.open(aba)),
        centro
    )

ft.app(main)

A figura 1 mostra o estado do aplicativo em execução. 1 (A) é o estado inicial, antes de qualquer ação do usuário. 1 (B) exibe a aba após o clique sobre Exibir drawer. 1 (C) é o estado após um clique sobre os três itens, seguido do clique sobre Fechar Aba ou em qualquer ponto da página fora da aba.