responsive_navigation_bar 4.0.4 copy "responsive_navigation_bar: ^4.0.4" to clipboard
responsive_navigation_bar: ^4.0.4 copied to clipboard

A responsive bottom navigation bar. Very beginner friendly. Feel free to contribute.

Getting Started #

Installation

Example Code

Features #

  • Very easy to set up, beginner friendly

  • Everything is documented + you will be asked to add required values - the rest is optional (with sound null safety)

  • By default, fontSize, iconSize and padding are responsive (change size with screen size)

  • Optional: Beautiful gradient (backgroundGradient) for navigation bar and/or buttons (or solid colors)

  • Optional: Change the opacity (backgroundOpacity) of the menu bar

  • Optional: Blurred background (backgroundBlur) from the top of the navigation bar to the bottom of the screen

  • By default shows text on selected button (and resizes all buttons), this can simply be disabled via: showActiveButtonText = false

  • Only StatelessWidgets

  • How to make the bottomNavigationBar float above the Scaffold's body:

Scaffold(
  extendBody: true,
  body: SafeArea(bottom: false, ...),
  bottomNavigationBar: ...
  ...
)
  • Colors in the example GIFs below:
backgroundColor:
    Theme.of(context).brightness == Brightness.dark
        ? const Color(0xff3c3c3c)
        : const Color(0xffbebebe),
inactiveIconColor:
    Theme.of(context).brightness == Brightness.dark
        ? const Color(0xffaaaaaa)
        : const Color(0xff969696),

ResponsiveNavigationBar in Action #

With animation #

Screenrecording Screenrecording
Screenrecording Screenrecording

Without animation #

Screenrecording Screenrecording
Screenrecording Screenrecording

Todo #

  • Add feature requests
  • Merge your pull requests
46
likes
130
pub points
84%
popularity

Publisher

verified publisherachim.io

A responsive bottom navigation bar. Very beginner friendly. Feel free to contribute.

Repository (GitHub)
View/report issues

Topics

#bottomnavigationbar #bottombar #responsive #ui

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_navigation_bar