Flutter Web - A Simple Responsive Navbar
Get started with basics of flutter pdf, learning body,query,parameters etc.
Flutter as we know, is google's Framework for cross platform development. It talks about creating Android, iOS, web and desktop apps with a single code base.
While this may sound interesting , The truth is far from this.
We can't just write code for a platform and expect it work everywhere, atleast not without certain tweaks.
So Here, We will talk about creating a simple responsive navbar.
Creating a Project
flutter create responsive_navbar .Here we will have a simple widget ResponsiveNavbar that will act as a Container for our app and will contain our other children widgets.
Code
class ResponsiveNavbar extends StatefulWidget {
const ResponsiveNavbar({Key? key}) : super(key: key);
@override
State<ResponsiveNavbar> createState() => _ResponsiveNavbarState();
}
class _ResponsiveNavbarState extends State<ResponsiveNavbar> {
List<Widget> navItems = [
ElevatedButton(onPressed: () {}, child: Text("Education")),
ElevatedButton(onPressed: () {}, child: Text("Skills")),
];
bool mobile = false;
@override
Widget build(BuildContext context) {
mobile = MediaQuery.of(context).size.width > 700 ? false : true;
return Scaffold(
appBar: AppBar(
title: Text("Desi programmer"),
actions: mobile ? null : navItems,
),
drawer: mobile
? Drawer(
child: ListView(
children: navItems,
),
)
: null,
body: Text("Main Content Container "),
);
}
}