Flutter Circular Bottom Navigation

Flutter Circular Bottom Navigation

Circular Bottom Navigation

Awesome Flutter

pub package APK

Flutter Circular Bottom Navigation

This is implementation of an artwork in Uplabs

Flutter Circular Bottom Navigation


Support us by becoming a patron on Patreon


Let’s get started

1 – Depend on it

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

  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

      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

      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;

Source Code

Please Visit Flutter Circular Bottom Navigation Source Code at GitHub