benyaminbeyzaie/circular_bottom_navigation

Circular Bottom Navigation (or maybe a tab bar).

Awesome Flutter

pub package APK

https://github.com/benyaminbeyzaie/circular_bottom_navigation/raw/master/repo_files/images/uplabs_demo.gif

This is implementation of an artwork in Uplabs

https://github.com/benyaminbeyzaie/circular_bottom_navigation/raw/master/repo_files/images/demo.gif

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

https://github.com/benyaminbeyzaie/circular_bottom_navigation/raw/master/repo_files/images/cheatsheet.png

3 - Use it like a charm

Make your TabItems

List<TabItem> tabItems = List.of([
    TabItem(Icons.home, "Home", Colors.blue, labelStyle: TextStyle(fontWeight: FontWeight.normal)),
    TabItem(Icons.search, "Search", Colors.orange, labelStyle: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
    TabItem(Icons.layers, "Reports", Colors.red, circleStrokeColor: Colors.black),
    TabItem(Icons.notifications, "Notifications", Colors.cyan),
  ]);

Use this widget everywhere you want

CircularBottomNavigation(
      tabItems,
      selectedCallback: (int selectedPos) {
        print("clicked on $selectedPos");
      },
    )

CircularBottomNavigation supports RTL designs, If you wrap your widget in a Directionality widget and set the textDirection property you can customize the direction:

MaterialApp(
  title: 'Circular Bottom Navigation Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Directionality(
    // use this property to change direction in whole app
    // CircularBottomNavigation will act accordingly
    textDirection: TextDirection.rtl,
    child: MyHomePage(title: 'circular_bottom_navigation'),
  ),
);

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

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;