circular bottom navigation (or maybe a tab bar).

circular bottom navigation for flutter

this is implementation of an artwork in uplabs

let’s get started

1 – depend on it

add this to your package’s pubspec.yaml file:

dependencies:
  circular_bottom_navigation: ^1.0.1

2 – install it

install packages from the command line:

flutter packages get

3 – import it

now in your dart code, you can use:

import 'package:circular_bottom_navigation/circular_bottom_navigation.dart';
import 'package:circular_bottom_navigation/tab_item.dart';

4 – cheatsheet

5 – use it like a charm

make your tabitems

list<tabitem> tabitems = list.of([
    new tabitem(icons.home, "home", colors.blue, labelstyle: textstyle(fontweight: fontweight.normal)),
    new tabitem(icons.search, "search", colors.orange, labelstyle: textstyle(color: colors.red, fontweight: fontweight.bold)),
    new tabitem(icons.layers, "reports", colors.red),
    new tabitem(icons.notifications, "notifications", colors.cyan),
  ]);

use this widget everywhere you want

circularbottomnavigation(
      tabitems,
      selectedcallback: (int selectedpos) {
        print("clicked on $selectedpos");
      },
    )

how to use circularbottomnavigationcontroller

with this controller you can read the current tab position, and set a new tab position on widget (without needing to rebuild the tree) with the widget built in animation.

just create a new instance of controller

circularbottomnavigationcontroller _navigationcontroller = 
new circularbottomnavigationcontroller(selectedpos);

then pass it in your widget

circularbottomnavigation(
      tabitems,
      controller: _navigationcontroller,
    );

now you can write (set new position with animation) and read value from it everywhere you want

// write a new value 
_navigationcontroller.value = 0;

// read the latest value
int latest = _navigationcontroller.value;