circle_bottom_navigation 0.1.0

An animated Bottom Navigation Bar for Flutter.

Circle Bottom Navigation

Getting Started

Add the plugin:

dependencies:
  ...
  circle_bottom_navigation: ^0.1.0

Usage

bottomNavigationBar: CircleBottomNavigation(
  initialSelection: currentPage,
  tabs: [
    TabData(icon: Icons.home, title: "Home"),
    TabData(icon: Icons.history, title: "History"),
    TabData(icon: Icons.search, title: "Search"),
    TabData(icon: Icons.alarm, title: "Alarm"),
  ],
  onTabChangedListener: (index) {
    setState(() {
      currentPage = index;
    });
  },
)

Attributes

required

initialSelection -> The number of your main page
tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

optional

circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
circleSize -> Defaults to 60, size of intern circle
barHeight -> Defaults to 60, height of bar
arcHeight -> Defaults to 70, height of external circle arc
arcWidth -> Defaults to 90, width of external circle arc
circleOutline -> Defaults to 10
shadowAllowance -> Defaults to 20, size of shadow
key -> Defaults to null

TabData

icon -> Icon to be used for the tab
title -> String to be used for the tab
onClick -> Optional function to be used when the circle itself is clicked, on an active tab

Showcase

If you use this package in a live app, let me know and I'll add you app here. ;)

Contributing

Found a bug? Please submit a PR!