pedromassango/titled_navigation_bar

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, read more bellow for more details.

You can see the source code of this lib inside the /lib folder.

Show some ❤️ and star the repo to support this project

Preview (default mode)

Preview (with reverse mode)

Package overview

• Custom icon color
• Custom indicator color
• Support from two to five items
• Reverse mode (show selected item as icon or title)
• Option to define custom item background color
• Use currentIndex property to update the Bar giving a tab position
• No need setState(...) to update the current index
• Support RTL TextDirection (thanks to Victor Uvarov)

Getting Started

Follow these steps to use this library

Add the plugin:

dependencies:
  ...
  titled_navigation_bar: ^5.0.0-nullsafety.0

Import the package

import 'package:titled_navigation_bar/titled_navigation_bar.dart';

Adding the widget

bottomNavigationBar: TitledBottomNavigationBar(
  currentIndex: 2, // Use this to update the Bar giving a position
  onTap: (index){
    print("Selected Index: $index");
  },
  items: [
      TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
      TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
      TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
      TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart),
      TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline),
  ]
)

Customization (Optional)

TitledBottomNavigationBar

onTap - Use this to get notified when an item is clicked, you can retrieve the current item's index on this function. Should not be null!
items - The items of your bottom navigation bar. Use the TitledNavigationBarItem class to add items. Should not be null!
curve - Use this to define your custom curve animation. Should not be null!
reverse - If true, the visible widget of the selected item will be the Text (with the title of the item). If false, the visible widget of the selected item will be the icon. Default to false
activeColor - The active Text/Icon color. The default color is the indicatorColor of your app Theme.
inactiveColor - The inactive Text/Icon color. The default is the black color.
indicatorColor - The indicator color. The default color is the indicatorColor of your app Theme.
currentIndex - Use this to update the Bar giving a position.
enableShadow - Use this to remove the NavigationBar's shadow

TitledNavigationBarItem

icon -The icon of this item. This will be used as default state if reverse mode is disabled
title - The title of this item. This will be used as default state if reverse mode is enabled

titled_navigation_bar's Issues

no attribute "current_index" so navigation does not occur.

Cant remove the bottom bar even though I intend to disposing it.

I post the picture in here to say it all

so I am gonna log in

this is what inside after log in, I move to profile tab with exit

can't seem to dispose the titled navigation bar literally :p

here is my code for that bar.

`class Home extends StatefulWidget {
@OverRide
_HomeState createState() => _HomeState();
}

class _HomeState extends State {
final int _pageCount = 5;
int _pageIndex = 0;
final List items = [
TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
TitledNavigationBarItem(title: Text('Histori'), icon: Icons.alarm_sharp),
TitledNavigationBarItem(title: Text('Keranjang'), icon: Icons.shopping_cart_outlined),
TitledNavigationBarItem(title: Text('Profil'), icon: Icons.person_outline),
];
@OverRide
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: _body(),
bottomNavigationBar: _bottomNavigationBar(),
),
);
}

Widget _body() {
return Stack(
children: List.generate(_pageCount, (int index) {
return IgnorePointer(
ignoring: index != _pageIndex,
child: Opacity(
opacity: pageIndex == index ? 1.0 : 0.0,
child: Navigator(
onGenerateRoute: (RouteSettings settings) {
return new MaterialPageRoute(
builder: () => _page(index),
settings: settings,
);
},
),
),
);
}),
);
}

Widget _page(int index) {
switch (index) {
case 0:
return Home2();
case 1:
return search();
case 2:
return histori();
case 3:
return Keranjang();
case 4:
return profil();
}
}

TitledBottomNavigationBar _bottomNavigationBar() {
final theme = Theme.of(context);
return new TitledBottomNavigationBar(
currentIndex: _pageIndex,
onTap: (index){
setState(() {
_pageIndex = index;});
},
items: items);
}
}`

and here just the exit code from profile class dart

`class profil extends StatefulWidget {
@OverRide
_profilState createState() => _profilState();
}

class _profilState extends State {
@OverRide
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Scaffold(
body: SingleChildScrollView(
child: Container(
margin: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 0.0),
child: Column(
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red
),
),
Text('nama'),
Row(children:[
SizedBox(width: 10.0),
Icon(Icons.edit),
TextButton(onPressed: (){}, child: Text('Edit Profil'))
]),
Row(
children:[
SizedBox(width: 10.0),
Icon(Icons.shop_two),
TextButton(onPressed: () {}, child: Text('Daftar sebagai supplier sampah baru'))
]
),
Row(
children: [
SizedBox(width: 10.0,),
Text('Tentang'),
],
),
Row(children:[
SizedBox(width: 10.0),
Icon(Icons.assignment_late),
TextButton(onPressed: () {Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: Panduan()));}, child: Text('Panduan'))
]),
Divider(color: Colors.black,),
Row(
children:[
SizedBox(width: 10.0),
Icon(Icons.article),
TextButton(onPressed: (){Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: Syarat()));}, child: Text('Syarat dan Ketentuan'))
]
),
Divider(color: Colors.black,),
Row(children:[
SizedBox(width: 10.0),
Icon(Icons.lock_outline_rounded),
TextButton(onPressed: (){Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: Kebijakan()));}, child: Text('Kebijakan Privasi'))
]),
Divider(color: Colors.black,),
Row(
children:[
SizedBox(width: 10.0),
Icon(Icons.all_inbox),
TextButton(onPressed: (){Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: Faq()));}, child: Text('Pertanyaan Umum'))
]
),
Row(children: [SizedBox(width: 10.0),Text('Lainnya')],),
SizedBox(height: 12.0,),
Row(children:[
SizedBox(width: 10.0),
Icon(Icons.android_outlined),
SizedBox(width: 7.0),
Text('Versi App 1.0.0',
style: TextStyle(
color: Colors.blueAccent
),)
]),
Divider(color: Colors.black,),
Row(
children:[
SizedBox(width: 10.0),
Icon(Icons.exit_to_app),
TextButton(onPressed: (){
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) =>
AuthScreen()), (Route route) => false);
}, child: Text('Log Out'))
]
),
],
),
),
),
);
}

}`

nullsafety prerelease not working :(

I receive various errors when I use the prerelease.

Can I give you a hand with testing or resolve some of these errors?

setState() or markNeedsBuild() called during build.

The callback I provided to onTap has a setState() in it. It works just great with the classic BottomNavigationBar but it doesn't with TitledBottomNavigationBar.

I get the error setState() or markNeedsBuild() called during build.

void _onTabTapped(int index) {
    setState(() {
      if (index == 0) {
        _scaffoldKey.currentState.openDrawer();
      } else {
        _currentIndex = index;
      }
    });
  }

  /// Construit le widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /*****/
      bottomNavigationBar: TitledBottomNavigationBar(
        onTap: (i) => _onTabTapped(i),
        initialIndex: 1,
        reverse: true,
        activeColor: Colors.black,
        currentIndex: _currentIndex,
        items: [
         /******/
        ],
      ),
    );
  }

This is the full error (which I think is not that relevant...) :

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(375.0, 667.0),
flutter: devicePixelRatio: 2.0, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding:
flutter: EdgeInsets.zero, viewInsets: EdgeInsets.zero, alwaysUse24HourFormat: false, accessibleNavigation:
flutter: falsedisableAnimations: falseinvertColors: falseboldText: false)):
flutter: setState() or markNeedsBuild() called during build.
flutter: This Home widget cannot be marked as needing to build because the framework is already in the
flutter: process of building widgets. A widget can be marked as needing to be built during the build phase
flutter: only if one of its ancestors is currently building. This exception is allowed because the framework
flutter: builds parent widgets before children, which means a dirty descendant will always be built.
flutter: Otherwise, the framework might not visit this widget during this build phase.
flutter: The widget on which setState() or markNeedsBuild() was called was:
flutter:   Home(state: _HomeState#c3616)
flutter: The widget which was currently being built when the offending call was made was:
flutter:   MediaQuery(MediaQueryData(size: Size(375.0, 667.0), devicePixelRatio: 2.0, textScaleFactor: 1.0,
flutter:   platformBrightness: Brightness.light, padding: EdgeInsets.zero, viewInsets: EdgeInsets.zero,
flutter:   alwaysUse24HourFormat: false, accessibleNavigation: falsedisableAnimations: falseinvertColors:
flutter:   falseboldText: false))
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:3503:11)
flutter: #1      Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:3529:6)
flutter: #2      State.setState (package:flutter/src/widgets/framework.dart:1133:14)
flutter: #3      _HomeState._onTabTapped (package:leonor_greyl_app_2019_41820/Home.dart:50:5)
flutter: #4      _HomeState.build.<anonymous closure> (package:leonor_greyl_app_2019_41820/Home.dart:73:23)
flutter: #5      _TitledBottomNavigationBarState._select (package:titled_navigation_bar/src/navigation_bar.dart:122:12)
flutter: #6      _TitledBottomNavigationBarState.initState (package:titled_navigation_bar/src/navigation_bar.dart:58:5)
flutter: #7      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3846:58)
flutter: #8      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5)
flutter: #9      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14)
flutter: #10     Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12)
flutter: #11     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #12     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #13     ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #14     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #15     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #16     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #17     ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #18     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #19     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:4601:32)
flutter: #20     MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4992:17)
flutter: #21     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #22     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #23     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #24     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #25     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #26     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #27     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #28     ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #29     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #30     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #31     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #32     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #33     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #34     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #35     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #36     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #37     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #38     StatelessElement.update (package:flutter/src/widgets/framework.dart:3796:5)
flutter: #39     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #40     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #41     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #42     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #43     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #44     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #45     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #46     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #47     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #48     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #49     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #50     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #51     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #52     ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #53     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #54     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #55     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #56     ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #57     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #58     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #59     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #60     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #61     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #62     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #63     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #64     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #65     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #66     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #67     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #68     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #69     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #70     StatelessElement.update (package:flutter/src/widgets/framework.dart:3796:5)
flutter: #71     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #72     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #73     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #74     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #75     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #76     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:4601:32)
flutter: #77     MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4992:17)
flutter: #78     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #79     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #80     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #81     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #82     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #83     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #84     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #85     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #86     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #87     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #88     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #89     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #90     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #91     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #92     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #93     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #94     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #95     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #96     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #97     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #98     Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #99     StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #100    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #101    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #102    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #103    StatelessElement.update (package:flutter/src/widgets/framework.dart:3796:5)
flutter: #104    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #105    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #106    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #107    StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #108    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #109    SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #110    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #111    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #112    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #113    ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #114    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #115    SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #116    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #117    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #118    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #119    StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #120    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #121    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #122    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #123    StatelessElement.update (package:flutter/src/widgets/framework.dart:3796:5)
flutter: #124    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #125    SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #126    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #127    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #128    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #129    ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #130    Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15)
flutter: #131    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #132    Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #133    BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2278:33)
flutter: #134    _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
flutter: #135    _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
flutter: #136    _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1012:15)
flutter: #137    _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:952:9)
flutter: #138    _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:773:7)
flutter: #140    _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19)
flutter: #141    _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5)
flutter: #142    _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:171:12)
flutter: (elided one frame from package dart:async-patch)
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════

Can we get a working example of the nav bar changing the current widget ?

This is a nice and beautiful plugin! However, I'm struggling to make it work properly.
Can you please provide an example showing how to do navigation with the Titled Navigation Bar? There is no explicit way of getting it to work.
I personally have troubles changing widget on button tap. I get the following exception immediately after build: setState() called during build, with the code blow:

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

  final List<TitledNavigationBarItem> _navItems = [
    TitledNavigationBarItem(
      icon: Icons.map,
      title: 'HOME',
    ),
    TitledNavigationBarItem(
      icon: Icons.zoom_out,
      title: 'PORTFOLIO',
    ),
    TitledNavigationBarItem(
      icon: Icons.zoom_out,
      title: 'CONTACT',
    ),
  ];

  final List<Widget> _children = [
    IntroPageView(),
    Empty(),
    Empty(),
  ];

  void _onTabTapped(int index) {
    _currentIndex = index;
    setState(() {}); // I use setState to change the current index but it throws an exception...
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: _children[_currentIndex],
        bottomNavigationBar: TitledBottomNavigationBar(
          onTap: (index) => _onTabTapped(index),
          activeColor: Colors.black,
          reverse: true,
          items: _navItems,
        ),
      ),
    );
  }
}

Internal SafeArea is generating unexpected bottom space

This internal SafeArea is generating an unexpected space between bottom bar and screen end:

Problem while making rounded corners.

Would be nice to have the option to remove the drop shadow, I was trying to make rounded corners. I put inside a Container() with some padding and didn't work.

support for change height of indicator and bottom bar

awesome package!
just add support for change indicator height and height of bottom bar

Notch support

Would it be possible to support a notch?

!

hi im new to flutter so my ques. it will be sooooo dumb :)
how can i navigate the buttons to go to my pages?
i mean like a bottom navigation

Change icon type

I would request you to change the icon type of TitledNavigationBarItem() from IconData to a widget, so that we can pas svgs, or anything we want.

Thankyou!

iPhone Issue

Hello,
I have an issue with your navigation bar on iPhone Devices (iPhone X Above) navigation bar is getting too low behind iPhone's floating bar at bottom.
I tried using SafeArea to Push widget up then we have two issues.
1st: Text is visible when navigation bar pushed up.
2nd Color below iPhone's bottom bar is different than titled_navigation bar color.
Here's The Video: https://imgur.com/a/SOjpnLE

Migrate to null safety

Description

We should migrate this package to null safety.

Resources

• How to migrate Dart packages to null safety
• Announcing Dart null safety beta

caching the page

Hello, thanks for the library. Every time the pages change, they are redrawn. Can you suggest a method to prevent this?

Calling toDouble() on null

The onTap() callback of triggers a the PageView to jump to the clicked page, which somehow causes toDouble() to be called on null.

The wierd thing is, that after the error gets thrown, I can change the onTap() to just print out the index, hot reload, and then change the onTap() back to the below code. This will make everything work. But the initial load will trigger this error.

Code to replicate:

class _MainPageState extends State<MainPage> {
  PageController pageController;

  void bottomNavigationTapped(int index) {
      pageController.jumpToPage(index);
  }

  @override
  void initState() {
    pageController = PageController(initialPage: 0);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: colorPicker.getPrimary(),
      body: body(),
      bottomNavigationBar: TitledBottomNavigationBar(
        indicatorColor:Colors.black,
        activeColor: Colors.black,
        inactiveColor: Colors.black45,
        initialIndex: 0,
        currentIndex: currentIndex,
        onTap: (index) {
          bottomNavigationTapped(index);
        },
        items: [
          TitledNavigationBarItem(
            title: 'PAGE 1',
            icon: Icons.home,
          ),
          TitledNavigationBarItem(
            title: 'PAGE 2',
            icon: Icons.home,
          ),
        ],
      ),
    );
  }

  Widget body() {
    return PageView(
      physics: NeverScrollableScrollPhysics(),
      controller: pageController,
      children: <Widget>[
        Center(
          child: Text('Page 1'),
        ),
        Center(
          child: Text('Page 2'),
        ),
      ],
    );
  }
}

Debug console:

Restarted application in 2,207ms.
I/flutter ( 2691): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 2691): The following NoSuchMethodError was thrown building MediaQuery(MediaQueryData(size: Size(411.4,
I/flutter ( 2691): 820.6), devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding:
I/flutter ( 2691): EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets.zero, alwaysUse24HourFormat:
I/flutter ( 2691): true, accessibleNavigation: false, disableAnimations: false, invertColors: false, boldText: false)):
I/flutter ( 2691): The method 'toDouble' was called on null.
I/flutter ( 2691): Receiver: null
I/flutter ( 2691): Tried calling: toDouble()
I/flutter ( 2691):
I/flutter ( 2691): When the exception was thrown, this was the stack:
I/flutter ( 2691): #0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:50:5)
I/flutter ( 2691): #1      double.*  (dart:core-patch/double.dart:33:23)
I/flutter ( 2691): #2      _PagePosition.getPixelsFromPage 
I/flutter ( 2691): #3      PageController.jumpToPage 
I/flutter ( 2691): #4      _MainPageState.bottomNavigationTapped.<anonymous closure>
I/flutter ( 2691): #5      State.setState 
I/flutter ( 2691): #6      _MainPageState.bottomNavigationTapped
I/flutter ( 2691): #7      _MainPageState.build.<anonymous closure>
I/flutter ( 2691): #8      _TitledBottomNavigationBarState._select
I/flutter ( 2691): #9      _TitledBottomNavigationBarState.initState
I/flutter ( 2691): #10     StatefulElement._firstBuild 
I/flutter ( 2691): #11     ComponentElement.mount 
I/flutter ( 2691): #12     Element.inflateWidget 
I/flutter ( 2691): #13     Element.updateChild 
I/flutter ( 2691): #14     ComponentElement.performRebuild 
I/flutter ( 2691): #15     Element.rebuild 
I/flutter ( 2691): #16     ComponentElement._firstBuild 
I/flutter ( 2691): #17     ComponentElement.mount 
I/flutter ( 2691): #18     Element.inflateWidget 
I/flutter ( 2691): #19     Element.updateChild 
I/flutter ( 2691): #20     ComponentElement.performRebuild 
I/flutter ( 2691): #21     Element.rebuild 
I/flutter ( 2691): #22     ComponentElement._firstBuild 
I/flutter ( 2691): #23     ComponentElement.mount 
I/flutter ( 2691): #24     ParentDataElement.mount 
I/flutter ( 2691): #25     Element.inflateWidget 
I/flutter ( 2691): #26     MultiChildRenderObjectElement.mount 
I/flutter ( 2691): #27     Element.inflateWidget 
I/flutter ( 2691): #28     Element.updateChild 
I/flutter ( 2691): #29     ComponentElement.performRebuild 
I/flutter ( 2691): #30     Element.rebuild 
I/flutter ( 2691): #31     ComponentElement._firstBuild 
I/flutter ( 2691): #32     StatefulElement._firstBuild 
I/flutter ( 2691): #33     ComponentElement.mount 
I/flutter ( 2691): #34     Element.inflateWidget 
I/flutter ( 2691): #35     Element.updateChild 
I/flutter ( 2691): #36     ComponentElement.performRebuild 
I/flutter ( 2691): #37     Element.rebuild 
I/flutter ( 2691): #38     ComponentElement._firstBuild 
I/flutter ( 2691): #39     ComponentElement.mount 
I/flutter ( 2691): #40     Element.inflateWidget 
I/flutter ( 2691): #41     Element.updateChild 
I/flutter ( 2691): #42     ComponentElement.performRebuild 
I/flutter ( 2691): #43     Element.rebuild 
I/flutter ( 2691): #44     ComponentElement._firstBuild 
I/flutter ( 2691): #45     StatefulElement._firstBuild 
I/flutter ( 2691): #46     ComponentElement.mount 
I/flutter ( 2691): #47     Element.inflateWidget 
I/flutter ( 2691): #48     Element.updateChild 
I/flutter ( 2691): #49     SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #50     Element.inflateWidget 
I/flutter ( 2691): #51     Element.updateChild 
I/flutter ( 2691): #52     ComponentElement.performRebuild 
I/flutter ( 2691): #53     Element.rebuild 
I/flutter ( 2691): #54     ComponentElement._firstBuild 
I/flutter ( 2691): #55     ComponentElement.mount 
I/flutter ( 2691): #56     Element.inflateWidget 
I/flutter ( 2691): #57     Element.updateChild 
I/flutter ( 2691): #58     SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #59     Element.inflateWidget 
I/flutter ( 2691): #60     Element.updateChild 
I/flutter ( 2691): #61     ComponentElement.performRebuild 
I/flutter ( 2691): #62     Element.rebuild 
I/flutter ( 2691): #63     ComponentElement._firstBuild 
I/flutter ( 2691): #64     StatefulElement._firstBuild 
I/flutter ( 2691): #65     ComponentElement.mount 
I/flutter ( 2691): #66     Element.inflateWidget 
I/flutter ( 2691): #67     Element.updateChild 
I/flutter ( 2691): #68     ComponentElement.performRebuild 
I/flutter ( 2691): #69     Element.rebuild 
I/flutter ( 2691): #70     ComponentElement._firstBuild 
I/flutter ( 2691): #71     StatefulElement._firstBuild 
I/flutter ( 2691): #72     ComponentElement.mount 
I/flutter ( 2691): #73     Element.inflateWidget 
I/flutter ( 2691): #74     Element.updateChild 
I/flutter ( 2691): #75     ComponentElement.performRebuild 
I/flutter ( 2691): #76     Element.rebuild 
I/flutter ( 2691): #77     ComponentElement._firstBuild 
I/flutter ( 2691): #78     ComponentElement.mount 
I/flutter ( 2691): #79     Element.inflateWidget 
I/flutter ( 2691): #80     Element.updateChild 
I/flutter ( 2691): #81     ComponentElement.performRebuild 
I/flutter ( 2691): #82     Element.rebuild 
I/flutter ( 2691): #83     ComponentElement._firstBuild 
I/flutter ( 2691): #84     ComponentElement.mount 
I/flutter ( 2691): #85     Element.inflateWidget 
I/flutter ( 2691): #86     Element.updateChild 
I/flutter ( 2691): #87     ComponentElement.performRebuild 
I/flutter ( 2691): #88     Element.rebuild 
I/flutter ( 2691): #89     ComponentElement._firstBuild 
I/flutter ( 2691): #90     StatefulElement._firstBuild 
I/flutter ( 2691): #91     ComponentElement.mount 
I/flutter ( 2691): #92     Element.inflateWidget 
I/flutter ( 2691): #93     Element.updateChild 
I/flutter ( 2691): #94     ComponentElement.performRebuild 
I/flutter ( 2691): #95     Element.rebuild 
I/flutter ( 2691): #96     ComponentElement._firstBuild 
I/flutter ( 2691): #97     StatefulElement._firstBuild 
I/flutter ( 2691): #98     ComponentElement.mount 
I/flutter ( 2691): #99     Element.inflateWidget 
I/flutter ( 2691): #100    Element.updateChild 
I/flutter ( 2691): #101    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #102    Element.inflateWidget 
I/flutter ( 2691): #103    Element.updateChild 
I/flutter ( 2691): #104    ComponentElement.performRebuild 
I/flutter ( 2691): #105    Element.rebuild 
I/flutter ( 2691): #106    ComponentElement._firstBuild 
I/flutter ( 2691): #107    ComponentElement.mount 
I/flutter ( 2691): #108    Element.inflateWidget 
I/flutter ( 2691): #109    Element.updateChild 
I/flutter ( 2691): #110    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #111    Element.inflateWidget 
I/flutter ( 2691): #112    Element.updateChild 
I/flutter ( 2691): #113    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #114    Element.inflateWidget 
I/flutter ( 2691): #115    Element.updateChild 
I/flutter ( 2691): #116    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #117    Element.inflateWidget 
I/flutter ( 2691): #118    Element.updateChild 
I/flutter ( 2691): #119    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #120    Element.inflateWidget 
I/flutter ( 2691): #121    Element.updateChild 
I/flutter ( 2691): #122    ComponentElement.performRebuild 
I/flutter ( 2691): #123    Element.rebuild 
I/flutter ( 2691): #124    ComponentElement._firstBuild 
I/flutter ( 2691): #125    StatefulElement._firstBuild 
I/flutter ( 2691): #126    ComponentElement.mount 
I/flutter ( 2691): #127    Element.inflateWidget 
I/flutter ( 2691): #128    Element.updateChild 
I/flutter ( 2691): #129    ComponentElement.performRebuild 
I/flutter ( 2691): #130    Element.rebuild 
I/flutter ( 2691): #131    ComponentElement._firstBuild 
I/flutter ( 2691): #132    ComponentElement.mount 
I/flutter ( 2691): #133    Element.inflateWidget 
I/flutter ( 2691): #134    Element.updateChild 
I/flutter ( 2691): #135    ComponentElement.performRebuild 
I/flutter ( 2691): #136    Element.rebuild 
I/flutter ( 2691): #137    ComponentElement._firstBuild 
I/flutter ( 2691): #138    StatefulElement._firstBuild 
I/flutter ( 2691): #139    ComponentElement.mount 
I/flutter ( 2691): #140    Element.inflateWidget 
I/flutter ( 2691): #141    Element.updateChild 
I/flutter ( 2691): #142    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #143    Element.inflateWidget 
I/flutter ( 2691): #144    Element.updateChild 
I/flutter ( 2691): #145    ComponentElement.performRebuild 
I/flutter ( 2691): #146    Element.rebuild 
I/flutter ( 2691): #147    ComponentElement._firstBuild 
I/flutter ( 2691): #148    ComponentElement.mount 
I/flutter ( 2691): #149    Element.inflateWidget 
I/flutter ( 2691): #150    Element.updateChild 
I/flutter ( 2691): #151    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #152    Element.inflateWidget 
I/flutter ( 2691): #153    Element.updateChild 
I/flutter ( 2691): #154    ComponentElement.performRebuild 
I/flutter ( 2691): #155    Element.rebuild 
I/flutter ( 2691): #156    ComponentElement._firstBuild 
I/flutter ( 2691): #157    StatefulElement._firstBuild 
I/flutter ( 2691): #158    ComponentElement.mount 
I/flutter ( 2691): #159    Element.inflateWidget 
I/flutter ( 2691): #160    Element.updateChild 
I/flutter ( 2691): #161    ComponentElement.performRebuild 
I/flutter ( 2691): #162    Element.rebuild 
I/flutter ( 2691): #163    ComponentElement._firstBuild 
I/flutter ( 2691): #164    ComponentElement.mount 
I/flutter ( 2691): #165    Element.inflateWidget 
I/flutter ( 2691): #166    Element.updateChild 
I/flutter ( 2691): #167    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #168    Element.inflateWidget 
I/flutter ( 2691): #169    Element.updateChild 
I/flutter ( 2691): #170    ComponentElement.performRebuild 
I/flutter ( 2691): #171    Element.rebuild 
I/flutter ( 2691): #172    ComponentElement._firstBuild 
I/flutter ( 2691): #173    ComponentElement.mount 
I/flutter ( 2691): #174    Element.inflateWidget 
I/flutter ( 2691): #175    Element.updateChild 
I/flutter ( 2691): #176    ComponentElement.performRebuild 
I/flutter ( 2691): #177    Element.rebuild 
I/flutter ( 2691): #178    ComponentElement._firstBuild 
I/flutter ( 2691): #179    StatefulElement._firstBuild 
I/flutter ( 2691): #180    ComponentElement.mount 
I/flutter ( 2691): #181    Element.inflateWidget 
I/flutter ( 2691): #182    Element.updateChild 
I/flutter ( 2691): #183    ComponentElement.performRebuild 
I/flutter ( 2691): #184    Element.rebuild 
I/flutter ( 2691): #185    ComponentElement._firstBuild 
I/flutter ( 2691): #186    StatefulElement._firstBuild 
I/flutter ( 2691): #187    ComponentElement.mount 
I/flutter ( 2691): #188    Element.inflateWidget 
I/flutter ( 2691): #189    MultiChildRenderObjectElement.mount 
I/flutter ( 2691): #190    Element.inflateWidget 
I/flutter ( 2691): #191    Element.updateChild 
I/flutter ( 2691): #192    _TheatreElement.mount 
I/flutter ( 2691): #193    Element.inflateWidget 
I/flutter ( 2691): #194    Element.updateChild 
I/flutter ( 2691): #195    ComponentElement.performRebuild 
I/flutter ( 2691): #196    Element.rebuild 
I/flutter ( 2691): #197    ComponentElement._firstBuild 
I/flutter ( 2691): #198    StatefulElement._firstBuild 
I/flutter ( 2691): #199    ComponentElement.mount 
I/flutter ( 2691): #200    Element.inflateWidget 
I/flutter ( 2691): #201    Element.updateChild 
I/flutter ( 2691): #202    ComponentElement.performRebuild 
I/flutter ( 2691): #203    Element.rebuild 
I/flutter ( 2691): #204    ComponentElement._firstBuild 
I/flutter ( 2691): #205    ComponentElement.mount 
I/flutter ( 2691): #206    Element.inflateWidget 
I/flutter ( 2691): #207    Element.updateChild 
I/flutter ( 2691): #208    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #209    Element.inflateWidget 
I/flutter ( 2691): #210    Element.updateChild 
I/flutter ( 2691): #211    ComponentElement.performRebuild 
I/flutter ( 2691): #212    Element.rebuild 
I/flutter ( 2691): #213    ComponentElement._firstBuild 
I/flutter ( 2691): #214    StatefulElement._firstBuild 
I/flutter ( 2691): #215    ComponentElement.mount 
I/flutter ( 2691): #216    Element.inflateWidget 
I/flutter ( 2691): #217    Element.updateChild 
I/flutter ( 2691): #218    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #219    Element.inflateWidget 
I/flutter ( 2691): #220    Element.updateChild 
I/flutter ( 2691): #221    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #222    Element.inflateWidget 
I/flutter ( 2691): #223    Element.updateChild 
I/flutter ( 2691): #224    ComponentElement.performRebuild 
I/flutter ( 2691): #225    Element.rebuild 
I/flutter ( 2691): #226    ComponentElement._firstBuild 
I/flutter ( 2691): #227    StatefulElement._firstBuild 
I/flutter ( 2691): #228    ComponentElement.mount 
I/flutter ( 2691): #229    Element.inflateWidget 
I/flutter ( 2691): #230    Element.updateChild 
I/flutter ( 2691): #231    ComponentElement.performRebuild 
I/flutter ( 2691): #232    Element.rebuild 
I/flutter ( 2691): #233    ComponentElement._firstBuild 
I/flutter ( 2691): #234    ComponentElement.mount 
I/flutter ( 2691): #235    Element.inflateWidget 
I/flutter ( 2691): #236    Element.updateChild 
I/flutter ( 2691): #237    ComponentElement.performRebuild 
I/flutter ( 2691): #238    Element.rebuild 
I/flutter ( 2691): #239    ComponentElement._firstBuild 
I/flutter ( 2691): #240    ComponentElement.mount 
I/flutter ( 2691): #241    Element.inflateWidget 
I/flutter ( 2691): #242    Element.updateChild 
I/flutter ( 2691): #243    ComponentElement.performRebuild 
I/flutter ( 2691): #244    Element.rebuild 
I/flutter ( 2691): #245    ComponentElement._firstBuild 
I/flutter ( 2691): #246    ComponentElement.mount 
I/flutter ( 2691): #247    Element.inflateWidget 
I/flutter ( 2691): #248    Element.updateChild 
I/flutter ( 2691): #249    ComponentElement.performRebuild 
I/flutter ( 2691): #250    Element.rebuild 
I/flutter ( 2691): #251    ComponentElement._firstBuild 
I/flutter ( 2691): #252    ComponentElement.mount 
I/flutter ( 2691): #253    Element.inflateWidget 
I/flutter ( 2691): #254    Element.updateChild 
I/flutter ( 2691): #255    ComponentElement.performRebuild 
I/flutter ( 2691): #256    Element.rebuild 
I/flutter ( 2691): #257    ComponentElement._firstBuild 
I/flutter ( 2691): #258    ComponentElement.mount 
I/flutter ( 2691): #259    Element.inflateWidget 
I/flutter ( 2691): #260    Element.updateChild 
I/flutter ( 2691): #261    ComponentElement.performRebuild 
I/flutter ( 2691): #262    Element.rebuild 
I/flutter ( 2691): #263    ComponentElement._firstBuild 
I/flutter ( 2691): #264    ComponentElement.mount 
I/flutter ( 2691): #265    Element.inflateWidget 
I/flutter ( 2691): #266    Element.updateChild 
I/flutter ( 2691): #267    ComponentElement.performRebuild 
I/flutter ( 2691): #268    Element.rebuild 
I/flutter ( 2691): #269    ComponentElement._firstBuild 
I/flutter ( 2691): #270    StatefulElement._firstBuild 
I/flutter ( 2691): #271    ComponentElement.mount 
I/flutter ( 2691): #272    Element.inflateWidget 
I/flutter ( 2691): #273    Element.updateChild 
I/flutter ( 2691): #274    ComponentElement.performRebuild 
I/flutter ( 2691): #275    Element.rebuild 
I/flutter ( 2691): #276    ComponentElement._firstBuild 
I/flutter ( 2691): #277    ComponentElement.mount 
I/flutter ( 2691): #278    Element.inflateWidget 
I/flutter ( 2691): #279    Element.updateChild 
I/flutter ( 2691): #280    ComponentElement.performRebuild 
I/flutter ( 2691): #281    Element.rebuild 
I/flutter ( 2691): #282    ComponentElement._firstBuild 
I/flutter ( 2691): #283    ComponentElement.mount 
I/flutter ( 2691): #284    Element.inflateWidget 
I/flutter ( 2691): #285    Element.updateChild 
I/flutter ( 2691): #286    ComponentElement.performRebuild 
I/flutter ( 2691): #287    Element.rebuild 
I/flutter ( 2691): #288    ComponentElement._firstBuild 
I/flutter ( 2691): #289    ComponentElement.mount 
I/flutter ( 2691): #290    Element.inflateWidget 
I/flutter ( 2691): #291    Element.updateChild 
I/flutter ( 2691): #292    ComponentElement.performRebuild 
I/flutter ( 2691): #293    Element.rebuild 
I/flutter ( 2691): #294    ComponentElement._firstBuild 
I/flutter ( 2691): #295    ComponentElement.mount 
I/flutter ( 2691): #296    Element.inflateWidget 
I/flutter ( 2691): #297    Element.updateChild 
I/flutter ( 2691): #298    ComponentElement.performRebuild 
I/flutter ( 2691): #299    Element.rebuild 
I/flutter ( 2691): #300    ComponentElement._firstBuild 
I/flutter ( 2691): #301    ComponentElement.mount 
I/flutter ( 2691): #302    Element.inflateWidget 
I/flutter ( 2691): #303    Element.updateChild 
I/flutter ( 2691): #304    SingleChildRenderObjectElement.mount 
I/flutter ( 2691): #305    Element.inflateWidget 
I/flutter ( 2691): #306    Element.updateChild 
I/flutter ( 2691): #307    ComponentElement.performRebuild 
I/flutter ( 2691): #308    Element.rebuild 
I/flutter ( 2691): #309    ComponentElement._firstBuild 
I/flutter ( 2691): #310    StatefulElement._firstBuild 
I/flutter ( 2691): #311    ComponentElement.mount 
I/flutter ( 2691): #312    Element.inflateWidget 
I/flutter ( 2691): #313    Element.updateChild 
I/flutter ( 2691): #314    ComponentElement.performRebuild 
I/flutter ( 2691): #315    Element.rebuild 
I/flutter ( 2691): #316    ComponentElement._firstBuild 
I/flutter ( 2691): #317    ComponentElement.mount 
I/flutter ( 2691): #318    Element.inflateWidget 
I/flutter ( 2691): #319    Element.updateChild 
I/flutter ( 2691): #320    ComponentElement.performRebuild 
I/flutter ( 2691): #321    Element.rebuild 
I/flutter ( 2691): #322    ComponentElement._firstBuild 
I/flutter ( 2691): #323    ComponentElement.mount 
I/flutter ( 2691): #324    Element.inflateWidget 
I/flutter ( 2691): #325    Element.updateChild 
I/flutter ( 2691): #326    ComponentElement.performRebuild 
I/flutter ( 2691): #327    Element.rebuild 
I/flutter ( 2691): #328    ComponentElement._firstBuild 
I/flutter ( 2691): #329    StatefulElement._firstBuild 
I/flutter ( 2691): #330    ComponentElement.mount 
I/flutter ( 2691): #331    Element.inflateWidget 
I/flutter ( 2691): #332    Element.updateChild 
I/flutter ( 2691): #333    ComponentElement.performRebuild 
I/flutter ( 2691): #334    Element.rebuild 
I/flutter ( 2691): #335    ComponentElement._firstBuild 
I/flutter ( 2691): #336    ComponentElement.mount 
I/flutter ( 2691): #337    Element.inflateWidget 
I/flutter ( 2691): #338    Element.updateChild 
I/flutter ( 2691): #339    ComponentElement.performRebuild 
I/flutter ( 2691): #340    Element.rebuild 
I/flutter ( 2691): #341    ComponentElement._firstBuild 
I/flutter ( 2691): #342    StatefulElement._firstBuild 
I/flutter ( 2691): #343    ComponentElement.mount 
I/flutter ( 2691): #344    Element.inflateWidget 
I/flutter ( 2691): #345    Element.updateChild 
I/flutter ( 2691): #346    ComponentElement.performRebuild 
I/flutter ( 2691): #347    Element.rebuild 
I/flutter ( 2691): #348    ComponentElement._firstBuild 
I/flutter ( 2691): #349    ComponentElement.mount 
I/flutter ( 2691): #350    Element.inflateWidget 
I/flutter ( 2691): #351    Element.updateChild 
I/flutter ( 2691): #352    RenderObjectToWidgetElement._rebuild 
I/flutter ( 2691): #353    RenderObjectToWidgetElement.mount 
I/flutter ( 2691): #354    RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> 
I/flutter ( 2691): #355    BuildOwner.buildScope 
I/flutter ( 2691): #356    RenderObjectToWidgetAdapter.attachToRenderTree 
I/flutter ( 2691): #357    _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.attachRootWidget 
I/flutter ( 2691): #358    runApp 
I/flutter ( 2691): #359    main
I/flutter ( 2691): #360    _runMainZoned.<anonymous closure>.<anonymous closure>  (dart:ui/hooks.dart:216:25)
I/flutter ( 2691): #365    _runMainZoned.<anonymous closure>  (dart:ui/hooks.dart:208:5)
I/flutter ( 2691): #366    _startIsolate.<anonymous closure>  (dart:isolate-patch/isolate_patch.dart:301:19)
I/flutter ( 2691): #367    _RawReceivePortImpl._handleMessage  (dart:isolate-patch/isolate_patch.dart:172:12)
I/flutter ( 2691): (elided 4 frames from package dart:async)
I/flutter ( 2691): ════════════════════════════════════════════════════════════════════════════════════════════════════

Wrong reference in readme file

In the readme, you have a reference to the different library

import 'package:bottom_navy_bar/bottom_navy_bar.dart';

Ability to use a widget rather than a TitledNavBarItem?

Just a curious thought, if it is possible to use a widget with height and width constraints as a bottom nav bar item.

I cam across this while optimizing my app for iPad, I have a sliding panel for my Music Player screen. Looking at how Apple implemented their sliding panel for Music Player screen it is as a item in the bottom nav bar.

Add Widget

There is no way to add image or svg in bottom, Please add option or way to use widget.

wrong indicator position in rtl mode

for testing that. just replace your material app with this in your example and see result :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Titled Bar',
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: child,,
        );
      },
      home: HomePage(),
    );
  }
}

Title Text Size

How can I change the title size?
I think it better to have a title as text widget rather than a string so it can be customize

Issue while using key

I am trying to use key for TitledBottomNavigationBar as:

GlobalKey navigationBarKey = GlobalKey();

TitledBottomNavigationBar(
                key: navigationBarKey,
                activeColor: _topLineColor,
                inactiveColor: Colors.grey,
                onTap: (int index) {
                  if (index != _selectedPage) {
                    setState(() {
                      _selectedPage = index;
                    });
                  }
                },
                items: [
                  TitledNavigationBarItem(
                      title: 'Home',
                      icon: Icons.home,),
                  TitledNavigationBarItem(
                      title: 'Deals',
                      icon: Icons.local_mall,),
                  TitledNavigationBarItem(
                      title: 'Help',
                      icon: Icons.help,),
                  TitledNavigationBarItem(
                      title: 'Account',
                      icon: Icons.person,),
                ],
              ),

It produces this error:

I/flutter (22507): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (22507): The following assertion was thrown building
I/flutter (22507): TitledBottomNavigationBar-[GlobalKey#8d79b](dependencies: [MediaQuery], state:
I/flutter (22507): _TitledBottomNavigationBarState#94fcd):
I/flutter (22507): Multiple widgets used the same GlobalKey.
I/flutter (22507): The key [GlobalKey#8d79b] was used by multiple widgets. The parents of those widgets were:
I/flutter (22507): - ConstrainedBox(BoxConstraints(w=Infinity, h=60.0), renderObject: RenderConstrainedBox#22c85
I/flutter (22507):   NEEDS-LAYOUT NEEDS-PAINT)
I/flutter (22507): - TitledBottomNavigationBar-[GlobalKey#8d79b](dependencies: [MediaQuery], state:
I/flutter (22507):   _TitledBottomNavigationBarState#94fcd)
I/flutter (22507): A GlobalKey can only be specified on one widget at a time in the widget tree.

Does not support dark mode

When I changed the theme to dark mode, nav bar background didn't change accordingly. Is this issue or the function is not available?

the icons are visible when I use as TabBar

the icons are visible when I use as TabBar

Badge Notifications on Icons?

Is there a way to support badge notifications on the nav item?

Dark Mode, Tab has White Line above.

for an app which has dark mode the tabs have a while line above them.

The bar items are color black, but the area where the indicator line goes is white for each item.

Only Icons

What if I want only using icons?

Navigation bar doesn't account for bottom view padding

Visual Issue: Preview

• Currently the navigation bar doesn't account for bottom view padding for notch like devices like iphone x
• Luckily flutter provides us with the exact height by using

MediaQuery.of(context).viewPadding.bottom

issues to change currentIndex and change animation !

how can we change current index ?!
it's my code

class _MainNavigationBarState extends State {
int currentPage = 0;

GlobalKey bottomNavigationKey = GlobalKey();

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: _getPage(currentPage),
),
),
bottomNavigationBar: TitledBottomNavigationBar(
currentIndex: 0, // Use this to update the Bar giving a position
onTap: (index) => _onTabTapped(index),
key: bottomNavigationKey,
inactiveColor: Colors.grey,
activeColor: Colors.black,
reverse: true,
curve: Curves.easeIn,
items: [
TitledNavigationBarItem(title: 'Home', icon: Icons.home),
TitledNavigationBarItem(title: 'Search', icon: Icons.search),
TitledNavigationBarItem(title: 'Basket', icon: Icons.shopping_basket),
TitledNavigationBarItem(title: 'Profile', icon: Icons.person_outline),
]
)

);

}

void _onTabTapped(int index) {
setState(() {
currentPage = index;
});

}

_getPage(int page) {
switch (page) {
case 0:
return Directionality(textDirection: TextDirection.rtl, child: HomeScreen());
case 1:
return Directionality(textDirection: TextDirection.rtl, child: Search());
case 2:
return Directionality(textDirection: TextDirection.rtl, child: Basket());
case 3:
return Directionality(textDirection: TextDirection.rtl, child: Profile());
default:
return Container();
}
}