Best Bottom Navigation and Bottom Sheet Libraries for Flutter

BottomAppBar is a container that is typically used with Scaffold‘s bottomNavigationBar, and can have a notch along the top that makes room for an overlapping FloatingActionButton. We need more than that, with beautiful icons and animations.

A Bottom Sheet shows information that supplements the primary content of the app.

Bottom Navigation Bar

convex_bottom_bar

This widget will bring life to your app. It support a large variety of designs and animations.

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Explore'),
      TabItem(icon: Icons.add, title: 'New'),
      TabItem(icon: Icons.message, title: 'History'),
      TabItem(icon: Icons.people, title: 'Account'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

animated_bottom_navigation_bar

This bottom navigation bar library offers a widget which make icon glowing on tap.

Scaffold(
   body: Text('Homepage'), //destination screen
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   bottomNavigationBar: AnimatedBottomNavigationBar(
      icons: iconList,
      activeIndex: _bottomNavIndex,
      gapLocation: GapLocation.center,
      notchSmoothness: NotchSmoothness.verySmoothEdge,
      leftCornerRadius: 32,
      rightCornerRadius: 32,
      onTap: (index) => setState(() => _bottomNavIndex = index),
      //other params
   ),
);

curved_navigation_bar

curved_navigation_bar is a stunning animating curved shape navigation bar. It supports adjustable color, background color, animation curve, and animation duration.

CurvedNavigationBar(
  backgroundColor: Colors.blueAccent,
  items: <Widget>[
    Icon(Icons.add, size: 30),
    Icon(Icons.list, size: 30),
    Icon(Icons.compare_arrows, size: 30),
  ],
  onTap: (index) {
    //Handle button tap
  },
)

flutter_snake_navigationbar

This widget adds snake animation on menu item changing.

Scaffold(
      bottomNavigationBar: SnakeNavigationBar.color(
        behaviour: snakeBarStyle,
        snakeShape: snakeShape,
        shape: bottomBarShape,
        padding: padding,
        snakeViewColor: selectedColor,
        selectedItemColor: snakeShape == SnakeShape.indicator ? selectedColor : null,
        unselectedItemColor: Colors.blueGrey,
        showUnselectedLabels: showUnselectedLabels,
        showSelectedLabels: showSelectedLabels,
        currentIndex: _selectedItemPosition,
        onTap: (index) => setState(() => _selectedItemPosition = index),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.notifications), label: 'tickets'),
          BottomNavigationBarItem(icon: Icon(CustomIcons.calendar), label: 'calendar'),
          BottomNavigationBarItem(icon: Icon(CustomIcons.home), label: 'home'),
          BottomNavigationBarItem(icon: Icon(CustomIcons.podcasts), label: 'microphone'),
          BottomNavigationBarItem(icon: Icon(CustomIcons.search), label: 'search')
        ],
      ),

salomon_bottom_bar

If you like a simple UI for bototm bar, salomon_botom_bar is good enoguh. Label and icon are supported with expanding animation when being active.

SalomonBottomBar(
  currentIndex: _SelectedTab.values.indexOf(_selectedTab),
  onTap: _handleIndexChanged,
  items: [
    /// Home
    SalomonBottomBarItem(
      icon: Icon(Icons.home),
      title: Text("Home"),
      selectedColor: Colors.purple,
    ),

    /// Likes
    SalomonBottomBarItem(
      icon: Icon(Icons.favorite_border),
      title: Text("Likes"),
      selectedColor: Colors.pink,
    ),

    /// Search
    SalomonBottomBarItem(
      icon: Icon(Icons.search),
      title: Text("Search"),
      selectedColor: Colors.orange,
    ),

    /// Profile
    SalomonBottomBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
      selectedColor: Colors.teal,
    ),
  ],
)

expandable_bottom_bar

This is an animatable bottom app bar with expandable sheet. 

bottomNavigationBar: BottomExpandableAppBar(
        // Provide the bar controller in build method or default controller as ancestor in a tree 
        controller: bbc,
        expandedHeight: expandedHeight.value,
        horizontalMargin: 16,
        expandedBackColor: Theme.of(context).backgroundColor,
        // Your bottom sheet code here
        expandedBody: Center(
          child: Text("Hello world!"),
        ),
        // Your bottom app bar code here
        bottomAppBarBody: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: Text(
                  "Hello",
                  textAlign: TextAlign.center,
                ),
              ),
              Spacer(
                flex: 2,
              ),
              Expanded(
                child: Text(
                  "World",
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      )

ff_navigation_bar

This is a configurable bottom navigation bar with raised highlight and shadow.

FFNavigationBar(
  theme: FFNavigationBarTheme(
    barBackgroundColor: Colors.white,
    selectedItemBorderColor: Colors.yellow,
    selectedItemBackgroundColor: Colors.green,
    selectedItemIconColor: Colors.white,
    selectedItemLabelColor: Colors.black,
  ),
  selectedIndex: selectedIndex,
  onSelectTab: (index) {
    setState(() {
      selectedIndex = index;
    });
  },
  items: [
    FFNavigationBarItem(
      iconData: Icons.calendar_today,
      label: 'Schedule',
    ),
    FFNavigationBarItem(
      iconData: Icons.people,
      label: 'Contacts',
    ),
    FFNavigationBarItem(
      iconData: Icons.attach_money,
      label: 'Bills',
    ),
    FFNavigationBarItem(
      iconData: Icons.note,
      label: 'Notes',
    ),
    FFNavigationBarItem(
      iconData: Icons.settings,
      label: 'Settings',
    ),
  ],
),

Bottom Sheet

rubber

Rubber is an elastic bottom sheet widget with the customizable material spring animation.

solid_bottom_sheet

The widget is a full customizable bottom sheet and it is easy to implement.

SolidBottomSheet(
  headerBar: Container(
    color: Theme.of(context).primaryColor,
    height: 50,
    child: Center(
      child: Text("Swipe me!"),
    ),
  ),
  body: Container(
    color: Colors.white,
    height: 30,
    child: Center(
      child: Text(
        "Hello! I'm a bottom sheet :D",
        style: Theme.of(context).textTheme.display1,
    ),
  ),
),

Leave a Comment

Your email address will not be published. Required fields are marked *