NavigationRail

NavigationRail é um controle de navegação que pode ser exibido ao lado (direito ou esquerdo) de um controle principal, servindo como um menu de escolha entre algumas poucas opções.

Exemplo básico

O exemplo abaixo mostra um aplicativo com uma linha (ft.Row) contendo uma ft.NavigationRail, uma linha divisória e uma coluna com um único texto. A ft.NavigationRail, por sua vêz, contém um texto inicial, 3 controles ft.NavigationRailDestination e um texto final.

import flet as ft
def main(page: ft.Page):
    page.bgcolor=ft.Colors.GREY_400
    page.add(
        ft.Row([
            ft.NavigationRail(
                leading=ft.Text("Início"),
                destinations=[
                    ft.NavigationRailDestination(icon=ft.Icons.WOMAN, label="Mulher"),
                    ft.NavigationRailDestination(icon=ft.Icons.MAN, label="Homem"),
                    ft.NavigationRailDestination(icon=ft.Icons.CHILD_FRIENDLY, label="Criança")
                ],
                trailing=ft.Text("Final")
            ),            
            ft.VerticalDivider(width=1),
            ft.Column([ ft.Text("Texto\ndo\nAplicativo!")])],
            expand=True
        )
    )
ft.app(main)

O resultado da execução desse código está mostrado na figura 1.

Para fazer com que o NavigationRail apareça à direita vasta inverter a ordem de inserção dos objetos inseridos na linha ft.Row.

Propriedades de NavigationRail

Evento de NavigationRail

NavigationRailDestination

Propriedades

# pode receber o ícone diretamente:
icon=ft.Icons.CHILD_FRIENDLY
# ou um controle flet.Icon
icon=ft.Icon(ft.Icons.CHILD_FRIENDLY)

# usando o nome do ícone:
selected_icon=ft.Icons.BOOKMARK
# uso com controle:
selected_icon=ft.Icon(ft.Icons.BOOKMARK)

Nota: † Procure escolher ícones diferentes para estados diferentes, como ícones de traço e preenchidos para tornar o NavigationRail mais legível, como ft.Icons.CLOUD e ft.Icons.CLOUD_QUEUE. Ícones iniciais (icon) devem ser definidos para a versão com traço e selected_icon para a versão preenchida.

Exemplo de uso do NavigationRail

import flet as ft

def main(page: ft.Page):
    page.bgcolor=ft.Colors.GREY_400
    page.window.width=500
    page.window.height=400

    cidade=["Manaus", "Recife", "Olinda"]
    destinos=[
        ft.NavigationRailDestination(
            icon=ft.Icons.LOCATION_CITY,
            selected_icon=ft.Icons.AIRPLANE_TICKET,
            label=cidade[0],
        ),
        ft.NavigationRailDestination(
            icon=ft.Icon(ft.Icons.random()),
            selected_icon=ft.Icon(ft.Icons.AIRPLANE_TICKET_SHARP),
            label=cidade[1],
        ),
        ft.NavigationRailDestination(
            icon=ft.Icons.LOCATION_HISTORY_SHARP,
            selected_icon=ft.Icon(ft.Icons.AIRPLANE_TICKET_OUTLINED),
            label=cidade[2],
        ),
    ]

    def getBotao(i):
        return ft.FloatingActionButton(
            foreground_color=ft.Colors.YELLOW,
            bgcolor=ft.Colors.BLUE_300,
            icon=ft.Icons.NEW_LABEL if i==0 else ft.Icons.DELETE,
            on_click=nova_rota if i==0 else apagar,
            text="Nova Seleção" if i==0 else "Apagar Tudo",
        )

    def seleciona(e):
        texto_corpo.value+=f"\nDestino Selecionado: {cidade[e.control.selected_index]}"
        texto_corpo.update()

    def nova_rota(e):
        texto_corpo.value+=f"\n\nSelecione Nova Rota:\n{'-'*26}\n"
        texto_corpo.update()

    def apagar(e):
        texto_corpo.value=f"Selecione a sua rota:\n{'-'*26}\n"
        texto_corpo.update()

    rail = ft.NavigationRail(
        bgcolor=ft.Colors.BLUE,
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        min_width=180,
        min_extended_width=400,
        leading=getBotao(0),
        trailing=getBotao(1),
        group_alignment=0.0,
        destinations=destinos,
        on_change=seleciona,
        extended=False
    )

    texto_corpo=ft.Text(f"Selecione a sua rota:\n{'-'*26}\n", color=ft.Colors.INDIGO_900, size=16)
    espaco_direita=ft.Container(
        content=texto_corpo,
        padding = ft.padding.all(15),
        border=ft.border.all(3, ft.Colors.BLUE_600),
        alignment=ft.alignment.top_left,
        bgcolor=ft.Colors.GREY_50,
        expand=True
    )
    page.add(ft.Row([rail, ft.VerticalDivider(width=2), espaco_direita,], expand=True,))

ft.app(main)

O resultado da execução desse código está mostrado na figura 2.