Circular Bottom Navigation Iman KhoshabiCircular Bottom Navigation [368⭐] - Beautiful animated bottom navigation bar by Iman Khoshabi.

Overview

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;
Comments
  • Remove unwanted shadow and Add TextStyle for Tab label

    Remove unwanted shadow and Add TextStyle for Tab label

    1. According to the artwork in Uplabs the icons must have no shadow and follow the flat colors. So I removed it and you can see the changes here: Screenshot_2019-08-15-06-00-42

    2. I made changes so users can pass style for label of each TabItem, of course it is not required and there is some default style for when the user leaves it empty (Bold) . This feature is added to fix issue #6

    opened by mderis 6
  • FontAwesome Icons issue

    FontAwesome Icons issue

    Thanks for the great package , I got a small problem when using FontAwesome icons are not centered within the circle, i tried changing the iconSize , but still not centered

    Screenshot_2019-04-12-18-17-08-120_com example schoolapp

    opened by ahmedkassem 5
  • Get a error when count of tabbar from 1 to 2

    Get a error when count of tabbar from 1 to 2

    tabs.length change from 1 to 2, it is getting a error with follow code.

    CircularBottomNavigation(
                  tabs.map2TabItem(),
                  controller: _navigationController,
                  barHeight: bottomNavBarHeight,
                  selectedCallback: (int index) {
                    controller.jumpToPage(index);
                  },
                )
    
    • PS: I just solve problem by as follow:
    Align(
              alignment: Alignment.bottomCenter,
              child: (tabs?.length??0) == 0 ? Container() : 
              StatefulBuilder(
                key: ValueKey(tabs.length),
                builder: (BuildContext context, setState) => CircularBottomNavigation(
                  tabs.map2TabItem(),
                  controller: _navigationController,
                  barHeight: bottomNavBarHeight,
                  selectedCallback: (int index) {
                    controller.jumpToPage(index);
                  },
                )
              ),
            )
    

    • debug info
    (_itemsSelectedState[pos] * ((widget.barHeight / 2) + widget.circleStrokeWidth)),
    
    The following RangeError was thrown building CircularBottomNavigation(dirty, dependencies: [MediaQuery], state: _CircularBottomNavigationState#b3126(tickers: tracking 1 ticker)):
    RangeError (index): Invalid value: Only valid value is 0: 1
    
    The relevant error-causing widget was
        CircularBottomNavigation 
    lib/…/tabview/tabview_scaffold.dart:55
    When the exception was thrown, this was the stack
    #0      List.[]  (dart:core-patch/growable_array.dart:149:60)
    #1      _CircularBottomNavigationState.build.<anonymous closure> 
    package:circular_bottom_navigation/circular_bottom_navigation.dart:196
    #2      ListMapView.forEach  (dart:_internal/list.dart:244:8)
    #3      _CircularBottomNavigationState.build 
    package:circular_bottom_navigation/circular_bottom_navigation.dart:178
    #4      StatefulElement.build 
    package:flutter/…/widgets/framework.dart:4069
    ...
    
    opened by huang12zheng 2
  • Enhancement: Bottom bar with scrollable

    Enhancement: Bottom bar with scrollable

    Hi Excellent bottom bar menu; :)

    I was wondering if you can add a scrollable for TabItem on the bottom.

    I am referring to iOS tab-based application; where when you add more TabItem; it will have more option to go to other TabItem, instead of TabItem squeezed within the bottom

    opened by ArivuLabs 2
  • Would nice to have :)

    Would nice to have :)

    Thanks for this plugin. I am newbie at Flutter also dart (coming from react native side) bu really love it. So I can't help at least now :( but it would be nice to see these options : barBackgroundColor circleStrokeColor barTopBorderColor barTopBorderWidth animationDuration

    opened by blntylmn 2
  • Navigation stuck at setState()

    Navigation stuck at setState()

    I was trying to using bottom navigation bar, I got stuck animation and not changing state issue.

    when I remove setState, working propery but, when I selectedPos change in the setState() It's stucks.

    Any idea ?

    import 'package:flutter/material.dart';
    import 'package:circular_bottom_navigation/circular_bottom_navigation.dart';
    import 'package:circular_bottom_navigation/tab_item.dart';
    import 'package:mitsurakuapp/view/FavoriteScreen.dart';
    
    class HistoryScreen extends StatefulWidget {
      @override
      HistoryState createState() => HistoryState();
    }
    
    class HistoryState extends State<HistoryScreen> with TickerProviderStateMixin {
      @override
      void initState() {
        super.initState();
      }
      @override
      void dispose(){
        super.dispose();
        _navigationController.dispose();
      }
      CircularBottomNavigationController _navigationController;
      int selectedPos =0;
      List<TabItem> tabItems = List.of([
        new TabItem(Icons.history, "history", Colors.blue),
        new TabItem(Icons.favorite, "favorite", Colors.orange,),
      ]);
      @override
      Widget build(BuildContext context) {
        _navigationController = new CircularBottomNavigationController(selectedPos);
        return new Scaffold(
          body: selectedPos == 0 ? Container(child:Text('test')): FavoriteScreen(),
          bottomNavigationBar: CircularBottomNavigation(tabItems, controller: _navigationController, selectedCallback: (int pos){
           print(pos);
           setState(() {
             this.selectedPos = pos;
           });
          },),
        );
      }
    }`
    
    
    opened by UG 2
  • Allows selected tab icon to execute its callback even if it's already selected.

    Allows selected tab icon to execute its callback even if it's already selected.

    closes #25

    Hitbox for tab icon when allowSelectedIconCallback is true is illustrated by green border as shown in image. The default behavior was not modified.

    opened by hugobrancowb 1
  • dosen't support RTL direction

    dosen't support RTL direction

    this package doesn't support right to left direction please solve this problem using something like postioned.dirctional with start & end instead of position with left & right

    enhancement 
    opened by EmelianShkira 1
  • The library 'package:circular_bottom_navigation/tab_item.dart' is legacy

    The library 'package:circular_bottom_navigation/tab_item.dart' is legacy

    → and should not be imported into a null safe library. Try migrating the imported library.

    Here is the report from dart pub outdated --mode=null-safety

    Showing dependencies that are currently not opted in to null-safety. [✗] indicates versions without null safety support. [✓] indicates versions opting in to null safety.

    Package Name Current Upgradable Resolvable Latest

    direct dependencies:
    circular_bottom_navigation ✗1.0.1 ✗1.0.1 ✗1.0.1 ✗1.0.1

    My config: Flutter 2.2.1 • channel stable • https://github.com/flutter/flutter.git Framework • revision 02c026b03c (3 weeks ago) • 2021-05-27 12:24:44 -0700 Engine • revision 0fdb562ac8 Tools • Dart 2.13.1

    opened by cphilc 1
  • Conflict with _Controllers

    Conflict with _Controllers

    I am Using https://pub.dev/packages/solid_bottom_sheet#-readme-tab- this package and when I tried to open the bottom sheet in onSelected callback of CircularBottomNavigation it changes the value of the bottom sheet controller too

    opened by Dr-Legend 1
  • Shadow is not configurable

    Shadow is not configurable

    Heya! The shadow applied to the background bar is not configurable. It's very obvious in this screenshot: image

    I'd love an option to turn it off. It would enable material design foundations even,

    opened by SwissCheese5 1
  • Unable to test with flutter driver

    Unable to test with flutter driver

    There are no options to add a key to the tab items. I attempted to duplicate those locally, but even adding a key to each Position in the stack, it still does not seem to work.

    enhancement 
    opened by NiamhG 2
Releases(2.3.0)
Owner
Iman khoshabi
Flutter Developer
Iman khoshabi
A beautiful and animated bottom navigation

BottomNavyBar A beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it. Preview PageVie

Pedro Massango 866 Dec 1, 2022
Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Aleyna Eser 2 Oct 25, 2022
Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Animated Search Bar Animated Search Bar package lets you add a beautiful search bar to your Flutter app. Installation Add the latest version of packag

Mohammad Saleh 5 Aug 7, 2022
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 21 Nov 22, 2022
A fancy animated bottom navigation bar 💫.

Stacky_bottom_nav_bar A fancy animated bottom navigation bar. Preview Default Light Mode Default Dark Mode ⚠️ IMPORTANT: when adding this widget don’t

null 5 Oct 23, 2022
A beautiful and simple bottom navigation bar with smooth animation when switching selected item.

Titled Bottom Navigation Bar A beautiful, clean and simple bottom navigation bar with smooth animation on click. This package is high customizable, re

Pedro Massango 324 Nov 5, 2022
A beautiful and animated bottom navigation

BottomNavyBar A beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it. Preview PageVie

Pedro Massango 866 Dec 1, 2022
Sleek circular slider/progress bar & spinner for Flutter

Sleek circular slider/progress bar & spinner for Flutter A highly customizable circular slider/progress bar & spinner for Flutter. Getting Started Ins

Mat Nuckowski 475 Nov 24, 2022
Open source Flutter package, simple circular progress bar.

Simple circular progress bar Open source Flutter package, simple circular progress bar. Getting Started Installing Basic Examples Colors Start angle L

null 5 Nov 11, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 90 Nov 21, 2022
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Rezaul Islam 237 Nov 15, 2022
A simple and beautiful animated app bar created with Flutter.

Animated App Bar Flutter application showcasing the creation of an animated app bar. End Result Relevant YouTube Video https://youtu.be/SkkmoT_DZUA Ge

Vihar 23 Jan 15, 2022
Custom Bottom navigation bar on Flutter.

Intro Custom Bottom navigation bar on Flutter. The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font cu

Ihab Zaidi 2 Oct 8, 2021
How to add a notification badge in bottom navigation bar

bottom_navigation_badge / BottomNavigationBadge BottomNavigationBadge is a Flutter class developed by westdabestdb. Getting Started Add this to your p

Görkem Erol 50 May 21, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 54 Sep 18, 2022
Custom bottom navigation bar with diamond icon in the middle.

Pub.dev Scaled List Custom bottom navigation bar with diamond icon in the middle you can customize the number of items either be Five or three. Usage

Hosain Mohamed 4 Jul 9, 2022
A custom bottom navigation bar with box animation for flutter

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way. De

SHIVAM SONI 1 Jul 31, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Spin Circle Bottom Bar An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications. Current Features Initial Release for Spin Circ

Paras Jain 79 Nov 26, 2022