circular_bottom_navigation 1.0.1

Flutter Android iOS web

Circular Bottom Navigation (or maybe a tab bar)

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

Awesome Flutter

pub package APK

This is implementation of an artwork in Uplabs

Donate #

Support us by becoming a patron on Patreon

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;
59
likes
80
pub points
87%
popularity

Circular Bottom Navigation (or maybe a tab bar)

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

iman.neofight@gmail.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on circular_bottom_navigation