DEV Community


Posted on

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


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;
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)