imaNNeoFighT / Circular_bottom_navigation
Licence: bsd-3-clause
Stars: ✭ 367
Programming Languages
dart
5743 projects
Labels
Projects that are alternatives of or similar to Circular bottom navigation
S3cmd
Official s3cmd repo -- Command line tool for managing Amazon S3 and CloudFront services
Stars: ✭ 3,767 (+926.43%)
Mutual labels: hacktoberfest
React Kanban
Yet another Kanban/Trello board lib for React.
Stars: ✭ 345 (-5.99%)
Mutual labels: hacktoberfest
Wp Graphql Acf
WPGraphQL for Advanced Custom Fields
Stars: ✭ 358 (-2.45%)
Mutual labels: hacktoberfest
Fnm
🚀 Fast and simple Node.js version manager, built in Rust
Stars: ✭ 6,102 (+1562.67%)
Mutual labels: hacktoberfest
Jdl Studio
JDL Studio is an online JHipster Domain Language visual editor
Stars: ✭ 365 (-0.54%)
Mutual labels: hacktoberfest
Crunchy
Finds common flaws in passwords. Like cracklib, but written in Go.
Stars: ✭ 363 (-1.09%)
Mutual labels: hacktoberfest
Flutter clean architecture
Clean architecture flutter: A Flutter package that makes it easy and intuitive to implement Uncle Bob's Clean Architecture in Flutter. This package provides basic classes that are tuned to work with Flutter and are designed according to the Clean Architecture.
Stars: ✭ 360 (-1.91%)
Mutual labels: hacktoberfest
Brazilian Values
🇧🇷 Funções de formatação, conversão e validação para valores, documentos e outras unidades usadas no Brasil. Como CEP, CNPJ, CPF, BRL (R$), datas, números etc.
Stars: ✭ 366 (-0.27%)
Mutual labels: hacktoberfest
Xemu
Original Xbox Emulator for Windows, macOS, and Linux (Active Development)
Stars: ✭ 362 (-1.36%)
Mutual labels: hacktoberfest
Kedro
A Python framework for creating reproducible, maintainable and modular data science code.
Stars: ✭ 4,764 (+1198.09%)
Mutual labels: hacktoberfest
Caligator
🐊 An open-source kickass cross-platform Calculator with the power of alligator
Stars: ✭ 366 (-0.27%)
Mutual labels: hacktoberfest
Javacord
An easy to use multithreaded library for creating Discord bots in Java.
Stars: ✭ 368 (+0.27%)
Mutual labels: hacktoberfest
Vuex Rest Api
A utility to simplify the use of REST APIs with Vuex
Stars: ✭ 365 (-0.54%)
Mutual labels: hacktoberfest
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.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
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;
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].