Flutter Bottom Navigation Bar — Flat, Bordered and Floating Pill Styles

The bottom navigation bar is one of the most important structural components in a Flutter app — it defines how users move between the app's primary sections. FlutterKit's Bottom Navigation Bar gives you three distinct styles, converted from real Flowbite HTML designs into production-ready Dart code.

Three Navigation Styles

Flat Style

The standard Material-style bottom nav — full-width bar with icon and label for each tab. Clean, familiar, and appropriate for most apps. Active tab has a coloured icon and label, inactive tabs are muted.

Bordered Style

Same layout as flat but with a visible top border and card-like elevation. Gives the navigation bar more visual separation from the content above it. Works well on light backgrounds where a subtle shadow helps define the boundary.

Floating Pill Style

The pill-shaped floating navigation bar — currently one of the most popular navigation patterns in modern mobile design. The bar floats above the content with rounded corners, a shadow, and a coloured indicator on the active tab. Creates a premium, app-store-quality feel.

How to Use

1. Visit rohansurve.in/flutterkit/bottom-nav-bar
2. Preview all three styles side by side
3. Copy the Dart code for your preferred style
4. Paste into your Flutter project scaffold

All three styles use the same prop interface — swapping between them is a single line change.

Implementation Pattern

BottomNavBar(
  style: BottomNavStyle.floatingPill,
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
  items: [
    BottomNavItem(icon: Icons.home, label: 'Home'),
    BottomNavItem(icon: Icons.search, label: 'Search'),
    BottomNavItem(icon: Icons.bookmark, label: 'Saved'),
    BottomNavItem(icon: Icons.person, label: 'Profile'),
  ],
)

Combining With Badges

Add count badges to navigation icons for notification counts, cart items, or unread messages. Combine with the Badge Widget from FlutterKit — both components follow the same theming system so they work together out of the box.

When to Use Each Style

Flat — standard apps, utility tools, productivity apps where navigation is functional rather than decorative.

Bordered — apps with white or very light backgrounds where you need visual separation without heavy shadow.

Floating Pill — social apps, lifestyle apps, consumer-facing products where visual design is a differentiator. The floating pill style is the current trend in high-quality app design.

Related FlutterKit Components

• Badge Widget — add count badges to nav icons
• Chip Widget — filter and choice chips for tab content
• Selection Controls — checkboxes, switches, sliders for settings screens
• Alert Widget — in-app notifications and status messages
• Button Widget — primary action buttons for each tab's content

All free at rohansurve.in/flutterkit.

Production-Ready Navigation, Free to Copy

The Flutter Bottom Navigation Bar gives you three polished styles in one component. Pick your style, copy the code, ship the feature.