RNavNSheet

Pub License GitHub code size in bytes GitHub stars

Animated, modern and highly customisable bottom navigation bar for flutter

Features

  • Animated, modern looking and highly customizable bottom navigation bar
  • Custom bottom sheet with center docked action button to toggle the bottom sheet
DEMO 1DEMO 2DEMO 3
DEMO1DEMO2DEMO3

Getting started

  • Add r_nav_n_sheet: <latest_version> to pubspec.yaml
  • Run flutter pub get in the terminal in the project directory or select pub get from within pubspec.yaml file
  • Add import statement,
import 'package:r_nav_n_sheet/r_nav_n_sheet.dart';

Usage


@override
Widget build(BuildContext context) {
  return Scaffold(
    //Other scaffold properties
      bottomNavigationBar: RNavNSheet(
        sheet: MySheet(), //Replace MySheet with your own bottom sheet
        items: const [
          RNavItem(
            icon: Icons.home_outlined,
            activeIcon: Icons.home,
            label: "Home",
          ),
          RNavItem(
            icon: Icons.search_outlined,
            activeIcon: Icons.search,
            label: "Search",
          ),
          RNavItem(
            icon: Icons.shopping_cart_outlined,
            activeIcon: Icons.shopping_cart,
            label: "Cart",
          ),
          RNavItem(
            icon: Icons.person,
            activeIcon: Icons.person_outline,
            label: "Account",
          ),
        ],
      )
  );
}

Additional information

For full implementation, see example

RNavItem

AttributesTypeDescription
iconIconDataicon when item is not selected
activeIconIconData?icon when item is selected, icon is used if activeIcon not passed
labelStringlabel for the item

RNavNSheet

AttributesTypeDescription
itemsList<RNavItem>list of bottom navigation items
initialSelectedIndexint?index of default selected item
sheetWidget?bottom sheet to be displayed on dock icon click
sheetOpenIconIconData?toggle button icon when sheet is open
sheetCloseIconIconData?toggle button icon when sheet is closed
sheetOpenIconBoxColorColor?toggle button background color when sheet is open
sheetCloseIconBoxColorColor?toggle button background color when sheet is closed
sheetOpenIconColorColor?toggle button foreground color when sheet is open
sheetCloseIconColorColor?toggle button foreground color when sheet is closed
sheetIconRotateAngledouble?angle (in radians) to rotate toggle button when sheet is open
sheetToggleDecorationBoxDecoration?decoration for toggle button
borderColorsList<Color>?list of colors for border over nav bar (gradient from left to right)
backgroundColorColor?background color of nav bar
backgroundGradientGradient?background gradient of nav bar
selectedItemColorColor?color of selected nav item (overrides gradient)
unselectedItemColorColor?color of unselected nav item
selectedItemGradientGradient?gradient of selected nav item
unselectedItemGradientGradient?gradient of unselected nav item
onTapvoid Function(int)?function callback that returns index of selected item
onSheetTogglevoid Function(bool)?function callback that returns true if sheet is open and false if sheet is closed

Libraries

r_nav_n_sheet