Circular Bottom Navigation (or maybe a tab bar).
This is implementation of an artwork in Uplabs
Donate
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:
dependencies:
circular_bottom_navigation: ^1.0.12 - Install it
Install packages from the command line:
flutter packages get3 - 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;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent