Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 19, 2022 07:10 pm GMT

Day 3: Still UI/bottom navigation bar (custom)

I think I moved the biggest rock off the way by finishing up the custom bottom navigation bar, I could make the bottom navigation bar as buttons inside container that takes the screen width and the height of BottomNavigationBar() //kBottomNavigationBarHeight But because I'm fairly new to Flutter and there are a lot of stuff to learn, I thought to make a widget (and possibly a flutter package) and use it exactly like I'm using the built-in Flutter BottomNavigationBar widget or external package.

The final result isn't as Flutter's BottomNavigationBar but it does the exact same thing, the only difference is the code implementation and how events are handled. Also before I forget to mention, I made changes in the CustomButton widget from Day 2

Preview

The funny thing is, the CustomBottomNavigationBar does not interact with clicks, it is basically a container with CustomButton widgets, what interact with clicks is the CustomButton itself, so in CustomBottomNavigationBar(childeren: _items) each item has its own onPressed() and because it is VoidCallback it does not return any args like in the normal BottomNavigatoinBar the onPressed(index) => ... returns an integer indicating the index of the current bottom navigation bar, in my BottomNavigatoinBar, this is how I managed to get the index:

onPressed: () {          setState(() {            _currentIndex = 1; // setting the index manually          // setting the buttons bool values to appear as one          // button is pushed down at a time            tapStatus[_currentIndex] = true; // the clicked button            tapStatus[0] = false;             tapStatus[2] = false;            _screenController.jumpToPage(_currentIndex);          });        },

I did not want to waste more time on making the CustomBottomNavigationBar receives click event, I might apply changes some other time

check out my custom bottom navigation bar


Original Link: https://dev.to/fathidevs/day-3-still-uibottom-navigation-bar-custom-m7h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To