How to Implement Adaptive and Responsive NavBar in Flutter?

Last Updated : 28 Jul, 2022

NavigationBar in web applications plays a crucial role. And different frameworks have different styles to implement. In Flutter, we have to mention differently for both mobile and website. But we can implement, the same navigation items in the drawer with this adaptive_navbar package in Flutter.

Adaptive_navbar developed by Mouli Bheemaneti

How to Implement Adaptive Navbar in Flutter

Adding Dependency

Add this dependency in your pubspec.yaml file

dependencies:
  adaptive_navbar: ^0.0.1 #check for latest in versions at https://pub.dev/packages/adaptive_navbar/versions

Or you can just run the following command in your terminal in the project directory, to directly add it to your dependency

$ flutter pub add adaptive_navbar

Import

Import navbar to your flutter app.

import 'package:adaptive_navbar/adaptive_navbar';

NavBarItem

NavBarItem takes the text and a function for onTap as its arguments. Depending on the screen size, AdaptiveNavbar decides whether to display the menu icon on the top right or navbar items in the navbar.

Example

Follow this example for a clear understanding of how the AdaptiveNavbar works.

Dart

import 'package:flutter/material.dart';
import 'package:adaptive_navbar/adaptive_navbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Adaptive NavBar',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final sw = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AdaptiveNavBar(
        screenWidth: sw,
        title: const Text("Adaptive NavBar"),
        navBarItems: [
          NavBarItem(
            text: "Home",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
          NavBarItem(
            text: "About Us",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
          NavBarItem(
            text: "About Us",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
          NavBarItem(
            text: "About Us",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'This package, "ADAPTIVE NAVBAR", was developed by Mouli Bheemaneti.',
        ),
      ),
    );
  }
}