Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benyaminbeyzaie/circular_bottom_navigation
Circular bottom navigation is a bottom navigation library for flutter with circular indicator and cool animations.
https://github.com/benyaminbeyzaie/circular_bottom_navigation
flutter hacktoberfest ui
Last synced: 2 days ago
JSON representation
Circular bottom navigation is a bottom navigation library for flutter with circular indicator and cool animations.
- Host: GitHub
- URL: https://github.com/benyaminbeyzaie/circular_bottom_navigation
- Owner: benyaminbeyzaie
- License: bsd-3-clause
- Created: 2019-02-12T20:50:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-18T14:04:00.000Z (8 months ago)
- Last Synced: 2024-10-29T10:45:17.892Z (8 days ago)
- Topics: flutter, hacktoberfest, ui
- Language: Dart
- Homepage:
- Size: 6.23 MB
- Stars: 657
- Watchers: 9
- Forks: 97
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Circular Bottom Navigation (or maybe a tab bar).
[](https://pub.dartlang.org/packages/circular_bottom_navigation)
[](https://github.com/benyaminbeyzaie/circular_bottom_navigation/raw/master/repo_files/CircularBottomNavExample-0.0.3.apk)
This is implementation of an artwork in [Uplabs](https://www.uplabs.com/posts/bottom-tab)
# Let's get started
## 1 - Install and import
### In your Dart code, you can use:
```kotlin
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
```dart
List 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
```dart
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:
```dart
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
```dart
CircularBottomNavigationController _navigationController =
new CircularBottomNavigationController(selectedPos);
```
Then pass it in your widget
```dart
CircularBottomNavigation(
tabItems,
controller: _navigationController,
);
```
Now you can write (set new position with animation) and read value from it everywhere you want
```dart
// Write a new value
_navigationController.value = 0;
// Read the latest value
int latest = _navigationController.value;
```