How Add Bottom App Bars In Flutter

A Bottom App Bar, unlike the common Top App Bar, has a difference in how it is implemented. The top app bar displays content and actions that are relevant to the current screen. It is suitable for branding, screen titles, navigation, and activities. The bar can also be transformed into a contextual action bar, displaying relevant information about what’s going on at the bottom of the screen. Bottom app bars, on the other hand, provide you access to a bottom navigation drawer and up to four actions, including the floating action button. That is why understanding how to add bottom app bars in flutter is important.

Bottom App Bars Fundamentals

Bottom app bars highlight important screen actions and raise awareness of the floating action button. The bottom app bar is easy to reach from a handheld position on a mobile device. Bottom app bars are only appropriate for mobile devices, access to a bottom navigation drawer, and screens with two to five actions. Additionally, bottom app bars should not be utilized for apps that have a bottom navigation bar or for screens with one or no actions.

Bottom App Bars Implementation Codes

Bottom app bars give users access to a bottom navigation drawer as well as up to four actions, including the floating action button. You must first import the Material Components package for Flutter before you can utilize Material buttons. Check the code below how to import it.

package:flutter/material.dart

Scaffold(
  bottomNavigationBar: BottomAppBar(
    child: Row(
      children: [
        IconButton(icon: Icon(Icons.menu), onPressed: () {}),
        Spacer(),
        IconButton(icon: Icon(Icons.search), onPressed: () {}),
        IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
      ],
    ),
  ),
  floatingActionButton:
      FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),

Bottom App Bar Conclusion

To conclude, today we’ve covered that bottom app bars provide you access to a bottom navigation drawer and up to four actions, including the floating action button. To display relevant information at the bottom of the screen, you can transform the bar into a contextual action bar. Understanding how to add bottom app bars in flutter is important. Most importantly, you can check out the official documentation here in case in the future you find this outdated, and here’s for my other blogs that you can follow. Thank you for reading. I hope you find it useful. If it was, share it with your family and friends.