Adaptive Navbar in Flutter by Mouli Bheemaneti

Mouli Bheemaneti
2 min readJan 9, 2022
Adaptive Navbar by Mouli Bheemaneti

Table of Contents

About Navbar & Appbar

About Adaptive Navbar

How to use Adaptive Navbar

Example of Adaptive Navbar

1. About Navbar & Appbar

Do you ever like single page mobile app or website? The answer is No, right ?So creating multiple pages is important in developing a mobile app or a web app. As a developer, developing two layouts separately is time taking process. But what if we have one package which takes only screen width and list of items you want in navbar? Seems perfect right? There is a solution for this, Adaptive Navbar

2. About Adaptive Navbar

Adaptive Navbar is a flutter package developed by Mouli Bheemaneti. This package takes similar arguments as AppBar does but in addition to it, it takes just the items and it’s design to give you the responsive and adaptive navbar.

3. How to use Adaptive Navbar?

Adding dependency

  • Add this dependency in your pubspec.yaml
adaptive_navbar: ^0.0.1 #check for latest in versions at #
  • Or you can just run the following command to directly add it to your dependency
$ flutter pub add adaptive_navbar


  • Import navbar to your flutter app.
import 'package:adaptive_navbar/adaptive_navbar';

4. Example for Adaptive Navbar


Give your valuable feedback on this package. Please reach me out for any contribution towards the development of this package.

Thank you

Enjoy Reading



Mouli Bheemaneti

A versatile being who loves to Flutter, blog, producing music, video editing.