circular_bottom_navigation

Description:

circular bottom navigation

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






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';
copied to clipboard
2 - CheatSheet #

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),
]);
copied to clipboard
Use this widget everywhere you want #
CircularBottomNavigation(
tabItems,
selectedCallback: (int selectedPos) {
print("clicked on $selectedPos");
},
)
copied to clipboard
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'),
),
);
copied to clipboard
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);
copied to clipboard
Then pass it in your widget
CircularBottomNavigation(
tabItems,
controller: _navigationController,
);
copied to clipboard
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;
copied to clipboard