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.
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.' ,
),
),
);
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...