FletGNavBar 🌟¶

Custom Google Navigation Bar (GNav) control for Flet apps, built on Flutter's google_nav_bar package.

Features¶

Fully compatible with Flet.
Supports tabs with icons, labels, and optional badges.
Customizable colors, active/inactive states, ripple, and hover effects.
Works on desktop, web, and mobile targets.

Installation¶

Git dependency¶

Add to your pyproject.toml:

dependencies = [
  "flet_gnav_bar @ git+https://github.com/pro-grammer-SD/flet_gnav_bar",
  "flet>=0.28.3",
]

PyPI dependency¶

If published on PyPI:

dependencies = [
  "flet_gnav_bar",
  "flet>=0.28.3",
]

Build your app:

flet build macos -v

Example Usage¶

import flet as ft
from flet_gnav_bar import FletGNavBar, FletGNavBarButton

def main(page: ft.Page):
    gnav = FletGNavBar(
        selected_index=0,
        tabs=[
            FletGNavBarButton(name="Home", icon_name="home", color="#2FB14F", badge="5"),
            FletGNavBarButton(name="Search", icon_name="search", color="#118DA3"),
            FletGNavBarButton(name="Profile", icon_name="user", color="#E6E21F", badge="!")
        ]
    )

    gnav.on_change = lambda _: print("Selected index:", gnav.selected_index)
    page.add(gnav)

ft.app(target=main)

Documentation¶

Full documentation is available here.