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.

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.

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:

Hi, thank you for this amazing package, I feel very helped by this, but I think the touch area is very small, it's very difficult to always press right on the icon, so I maximize the touch area to make it easier to use.

sorry if my English is difficult to understand, I use Google translate.

• before

• after

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

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

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

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?

Will default to 50 for radius as per the current code. But it can now be configured on a BottomNavyBarItem by BottomNavyBarItem case, this allows for squares with rounded corners rather than just having to have the pill style.

I have forked and run this code in my project (see below)

This is the re-implementation of most of the work done on #67 - however with a little bit missing and some optimization to the options.

Let's see if this one can ever be merged. 👍

Although it is from Flutter's favorites list but it is not well supported, as the last modification was 13 months ago. I used it in a project but I had to modify it to accept null-safety . Please Flutter team support your packages.

This is the same issue reported on #59.

On small devices, having 5 items can overflow because the width of every single item is fixed when you are building them: 130 for the selected one and 50 otherwise. I've tested on a Nexus 5S that has 320 pixels wide and with 5 items without considering padding it requires 330 logical pixels.

My suggestion would be to calculate twice the space for the selected one and divide the remaining space to the other items and pass this constraints to the item being built. Something like this:

final screenSize = MediaQuery.of(context).size;

    const itemSidePadding = 12;

    final maxItemWidth =
        screenSize.width * (1 / items.length) - (itemSidePadding * 2);
    final maxSelectedWidth =
        screenSize.width * (2 / (items.length)) - (itemSidePadding * 2);

Sorry if I did something wrong here, this is my first ever issue report on git.

Love your work, thank you for this amazing package!

Hi,

i'm trying to use this package and i have a BottomNavyBarItem with a title maybe too long. The title is "notifications", seems like it gets cutted on iPhone 11 pro.

Is there any solution to this?

Thank you!

Hi, Pedro 👋🏻

I added two new properties to the Bottom Navy Bar Widget:

• showSelectionShape: Defaults to true. Its function is to give the option to disable the highlight color shape.
• cursor: Defaults to clickable cursor. Its function is to change the cursor of the items hover. This is mainly for the web hover.

Please, check the changes, and tell me what do you think. I hope my contribution will be useful.

Regards, Alejandro Ramos...

💙