Hey. I was wondering if there’s a way to keep it locked in place even when we’ve changed pages (pages that are not listed in the items array). I know the default BottomNavigationBar accept a type and it can be a type of fixed and was wondering if BottomNavyBar also has something similar. I really need it to always be there, in every single page.

I honestly love this widget, thanks a lot for making it

Is there any way to control single bottom navy item opacity?

hello,
thanks for your plugin.
My question is : I have 2 items, how to center it?

Thanks

Hi, The animation of change in color of Bottom items is not working any longer. Can you please fix it.

Hi,
i am doing muti-screen and i got this issue, could you please fix this

This package is working very well with Flutter Web. You should add that it works with Flutter web!

I noticed that when I slide from page1 to page2 both pages got rendered, while should not be like so, this will cause performance issue,

Is there a way to add notch FloatingActionButton on center?

Does this work with routes, if so, how?
thanks,

I upgraded my flutter from 2.1.0 to 2.3.0 and suddenly it started to throw me an error i.e.

Error: No named parameter with the name 'currentIndex'.

I'm currently on 5.1.0.

can we have the index click function as an event in bloc pattern? Or do you just use stream builder and pagination if you want one of the views to load items from firestore

please help todo onTap state change.

Hello,

Thanks for your awesome plugin.
I have a question: Is it possible to add custom image instead of Icon?

Thanks

Would be nice to have an optional parameter for the bottom_navy_bar to change the duration of the animation, when changing the section.

BottomNavyBarItem max is 5, how to use more than 5 item?

BottomNavyBar(
   selectedIndex: _selectedIndex,
   showElevation: true, // use this to remove appBar's elevation
   onItemSelected: (index) => setState(() {
              _selectedIndex = index;
              _pageController.animateToPage(index,
                  duration: Duration(milliseconds: 300), curve: Curves.ease);
    }),

BottomNavyBar has a currentIndex not selectedIndex.
bottom_navy_bar: ^3.0.0
Flutter 1.7.8

I'd like to have an item(Tab) to be selected on the first launch, but it only reacts to a tap.
index is 0 by default, but it awaits for a tap, all tabs have inactive view by default.

Hello, as my icons are customized I can only access using icon: ImageIcon(images/ icon.png), in BottomNavigationBarItem I can, but in your package only accept Icon in icon (icon: Icon(Icons.add)
How to solve?

Could it be possible to add controls for text and background colors separately? Specifically I'd want to have a black button with white text

Below is the code in my main.dart file, note that swiping behaviour works but the logic of pageController doesn't work.

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  PageController _pageController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: PageView(
          controller: _pageController,
          children: <Widget>[
            HomeContent(),
            CalendarContent(),
            AddContent(),
            ProjectsContent(),
            SettingsContent()
          ],
          onPageChanged: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        showElevation: true,
        itemCornerRadius: 24,
        curve: Curves.elasticInOut,
        onItemSelected: (index) => setState(() {
          _currentIndex = index;
          _pageController.animateToPage(index,
              duration: Duration(milliseconds: 300), curve: Curves.ease);
        }),
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            activeColor: Colors.deepPurple[800],
            inactiveColor: Colors.black45
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.calendar_today_outlined),
            title: Text('Calendar'),
            activeColor: Colors.deepPurple[800],
            inactiveColor: Colors.black45
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.add),
            title: Text('Add'),
            activeColor: Colors.deepPurple[800],
            inactiveColor: Colors.black45
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.work_outline_outlined),
            title: Text('Projects'),
            activeColor: Colors.deepPurple[800],
            inactiveColor: Colors.black45
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
            activeColor: Colors.deepPurple[800],
            inactiveColor: Colors.black45
          ),
        ],
      )
    );
  }
}

I tried with both page Controller Jump to page and the animateToPage but it either disables clicking on the items or it doesnt change page and just clicking behaviour works and not page changing one.

Also I tried with and without SizedBox.expand as parent of Page View but it didn't work.

I will try to make a new project and try it again to see if its this package problem or not.

Ig you are using this package, please send the link of your project and the project name here.

Time to release a stable version with Dart's Null-Safety.

Hey, I'm getting this error.
Error: No named parameter with the name 'selectedIndex'.
selectedIndex: _index,
Context: Found this candidate, but the arguments don't match.
BottomNavyBar(
^

Hi,
this works fine with PageView on an app with a single StatefulWidget , but on a more complex app with multiple Stateful/Stateless classes connected using Navigator and each having a bottom navigation bar, the animation does not fire.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyPage'),
      ),
      body: Center(child: Text('MyPage')),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: currentIndex,
        showElevation: true,
        itemCornerRadius: 8,
        curve: Curves.easeInBack,
        onItemSelected: (index) => setState(() {
          Navigator.push(context,
              MaterialPageRoute(builder: (BuildContext context) => Page2()));
        }),
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.apps),
            title: Text('MyPage'),
            activeColor: Colors.red,
            textAlign: TextAlign.center,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.people),
            title: Text('Page2'),
            activeColor: Colors.purpleAccent,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  int currentIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: currentIndex,
        showElevation: true,
        itemCornerRadius: 8,
        curve: Curves.easeInBack,
        onItemSelected: (index) => setState(() {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (BuildContext context) => MyHomePage()));
        }),
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.apps),
            title: Text('MyPage'),
            activeColor: Colors.red,
            textAlign: TextAlign.center,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.people),
            title: Text('Page2'),
            activeColor: Colors.purpleAccent,
            textAlign: TextAlign.center,
          ),
        ],
      ),
      body: Center(
        child: Text('Page2'),
      ),
    );
  }
}

There is a Box decoration used in the _ItemWidget. It will be nice to have this configurable. For example to use : https://api.flutter.dev/flutter/material/UnderlineTabIndicator-class.html. This way we can achieve much more configurability in the widget. Anyhow, thanks for creating this nice and very useful lib.

This is so Laggy!!!
Is there any way to solve this problem?

Hello. Is it possible to disable Swiping Right or Left? I only want to switch between screens by clicking on the bottom navy bar icons, Not Swiping pages right or left

I really appreciate your work, Nice bottom_navy_bar 👍

When the app is loaded, the navigation item is not selected by default, I have to manually tap to the current item.

the view of navigation is't correct on tablet 10 when i'm useing text with lenth >10

BottomNavyBar forces us to pass an Icon and a Text. If those properties are of type Widget, then we can pass a lot more usefull things, like SVG icons with badges, etc.

I did this change and it should work without any breaking changes:

class BottomNavyBarItem {
  final Widge icon; // <--- Widget instead of Icon
  final Widget title; // <--- Widget instead of Text
  final Color activeColor;
  final Color inactiveColor;
  final TextAlign textAlign;

  BottomNavyBarItem({
    @required this.icon,
    @required this.title,
    this.activeColor = Colors.blue,
    this.textAlign,
    this.inactiveColor,
  }) {
    assert(icon != null);
    assert(title != null);
  }
}

can we make inactive item's title appear ?

When the app is loaded, the navigation item is not selected by default, I have to manually tap to the current item to show overlay on the top of it.

Hello, I would like to add a Tooltip to every item in BottomNavyBar.items.

Currently, the items cannot easily be wrapped in a Tooltip since BottomNavyBar.items has the explicit type List<BottomNavyBarItem>.

Ideally, I think BottomNavyBar.items should be of type List<Widget> instead. Then, the BottomNavyBarItems can be wrapped with other Widgets without impacting the interface.

This works well in existing native Widgets, for example IconButton. IconButton.icon is typically an Icon, but the interface specifies Widget.

What are your thoughts on using the generic Widget type in this case?

i'm still new to flutter and was wonder if i can use it on the top instead of bottom?

I am new to flutter, and was hoping you might be able to provide an example that uses the PageController to allow navbar or swiping navigation with animations. Thanks in advance!

While Slide between the Container, Nav Button animate doesnt change according to widget

It should have a shrinking animation instead of jumping straight to the small size.
Also, it would be nice if the color faded in when an icon is selected and fades out when it's deselected

I wrote the code same as tutorial, it ran normally, but I found an issue, when I trying to tap on item on the bottom navbar the page doesn't changed, but when I swipe left or right the page changed normally.

Please kindly check my codes below, thank you :)

import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MAL MALIOBORO'), centerTitle: true),
      body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() => _currentIndex = index);
          },
          children: <Widget>[
            Container(
              color: Colors.blueGrey,
            ),
            Container(
              color: Colors.redAccent,
            ),
            Container(
              color: Colors.lightGreenAccent,
            ),
            Container(
              color: Colors.blueAccent,
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        showElevation: true,
        onItemSelected: (index) {
          setState(() => _currentIndex = index);
          _pageController.jumpToPage(index);
          _pageController.animateToPage(index,
              duration: Duration(microseconds: 300), curve: Curves.ease);
        },
        items: <BottomNavyBarItem>[
          BottomNavyBarItem(title: Text('Home'), icon: Icon(Icons.home)),
          BottomNavyBarItem(title: Text('Inbox'), icon: Icon(Icons.inbox)),
          BottomNavyBarItem(title: Text('Chat'), icon: Icon(Icons.chat_bubble)),
          BottomNavyBarItem(title: Text('Profile'), icon: Icon(Icons.person)),
        ],
      ),
    );
  }
}

Hi!

Thanks for merging in my last PR (#41). Please can you cut a new release of this library to pub.dev?

Thanks again,
Luke

Hello,

Thanks for your awesome plugin.
I have a question: can we add the badge at the top of
In some cases, I want to show the number of message (for example)
Thanks

At the Bottom of the iPhone X... is the Navigation "Line". At this point there should be white space. The Navy Bar is behind this Line.

How it should look:

The scroll position of one screen is getting reset after coming back from another.
ex: In HomePage i scrolled to bottom and went to another page then went to home page the scroll position is top. Any solution?

If i want to add newsfeed i need to maintain the scroll position it's necessary. Look into this.
Thanks.

Hi,

Is there any option to add rounded top corners to the bar?

Thanks,
Pawel

Hello,

I want to be able to apply my own backgroundColor on the container when tab is active. Can you expose a background color parameter and remove withOpacity(0.2) (or put opacity to 1) when backgroundColor is provided?

Hi, I really commend the great work put into this package.

Please I would like to know if it's possible to programmatically change the position of the tab.

For instance, I want to be able to transition the user to another page without them clicking on the bottom navigation bar.

Thanks.

in first time tab not active

Hi

Is it possible to add an option to disable the shadow box line 109?

Regards.

Thanks for posting your code. Nice stuff!

For line 24 in the constructor, there is the following assert:

assert(items.length >= 2 || items.length >= 5);

Shouldn't it be:

assert(items.length >= 2 && items.length <= 5);

As it stands, an items.length of 7 (for ex) would pass the test contrary to the requirements listed in your docs.

I have the same issue and is inside of a Stetefull widget, I put the BottomNavyBar in the bottom part of the Appbar using PreferredSize, and when the app is loaded the navigation item is not selected by default.

bottom: PreferredSize(
            preferredSize: Size(0,40),
            child: BottomNavyBar(
              onItemSelected: (index) => setState(() {
                  _index = index;
                  _controllerTab.animateTo(_index);
              }),
              items: [
                BottomNavyBarItem(
                  icon: Icon(Icons.chrome_reader_mode),
                  title: Text('Referendum'),
                  activeColor: Colors.red,
                  inactiveColor: Colors.grey,
                ),
                BottomNavyBarItem(
                    icon: Icon(Icons.people),
                    title: Text('Pagar'),
                    activeColor: Colors.green,
                    inactiveColor: Colors.grey
                ),
                BottomNavyBarItem(
                    icon: Icon(Icons.message),
                    title: Text('Derechos'),
                    activeColor: Colors.deepPurple,
                    inactiveColor: Colors.grey,
                ),
                BottomNavyBarItem(
                    icon: Icon(Icons.settings),
                    title: Text('Notificaciones'),
                    activeColor: Colors.blue,
                    inactiveColor: Colors.grey,
                ),
              ],
            ),
          ),