circular_bottom_navigation 2.1.2 copy "circular_bottom_navigation: ^2.1.2" to clipboard
circular_bottom_navigation: ^2.1.2 copied to clipboard

Circular Bottom Navigation (or maybe a tab bar)

Circular Bottom Navigation (or maybe a tab bar). #

Awesome Flutter

pub package APK

This is implementation of an artwork in Uplabs

Let's get started #

1 - Install and import #

In your Dart code, you can use: #

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

2 - CheatSheet #

3 - Use it like a charm #

Make your TabItems #

List<TabItem> tabItems = List.of([
    TabItem(Icons.home, "Home",, labelStyle: TextStyle(fontWeight: FontWeight.normal)),
    TabItem(, "Search",, labelStyle: TextStyle(color:, fontWeight: FontWeight.bold)),
    TabItem(Icons.layers, "Reports",,
    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 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;