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:

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

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

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
...

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

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

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;
       });
      },),
    );
  }
}`

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.

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

→ 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

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

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

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

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.