In this article, I have defined How works navigation drawer menu in flutter.
You can Download Source Code via Github.
It is very easy to implement navigation drawer in flutter as following simple code
return Scaffold(
appBar: AppBar(
title: Text("DrawerMenu Demo"),
),
drawer: Drawer(),//this will just add the Navigation Drawer Icon
),
We will add ListView as child of Drawer Widgets as following
drawer: Drawer(
child: ListView(
children: <Widget>[],
),
),
main.dart
import 'package:drawer_demo/pages/home_page.dart';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'DrawerMenu Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
home_page.dart
import 'package:drawer_demo/fragments/home_fragment.dart';
import 'package:drawer_demo/fragments/profile_fragment.dart';
import 'package:drawer_demo/fragments/aboutus_fragment.dart';
import 'package:flutter/material.dart';
class DrawerItem {
String title;
IconData icon;
DrawerItem(this.title, this.icon);
}
class HomePage extends StatefulWidget {
final drawerItems = [
new DrawerItem("Home", Icons.home),
new DrawerItem("Profile", Icons.person_outline),
new DrawerItem("Aboutus", Icons.people_outline)
];
@override
State<StatefulWidget> createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
int _selectedDrawerIndex = 0;
_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new HomeFragment();
case 1:
return new ProfileFragment();
case 2:
return new AboutusFragment();
default:
return new Text("Error");
}
}
_onSelectItem(int index) {
setState(() => _selectedDrawerIndex = index);
Navigator.of(context).pop(); // close the drawer
}
@override
Widget build(BuildContext context) {
List<Widget> drawerOptions = [];
for (var i = 0; i < widget.drawerItems.length; i++) {
var d = widget.drawerItems[i];
drawerOptions.add(
new ListTile(
leading: new Icon(d.icon),
title: new Text(d.title),
selected: i == _selectedDrawerIndex,
onTap: () => _onSelectItem(i),
)
);
}
return new Scaffold(
appBar: new AppBar(
// here we display the title corresponding to the fragment
// you can instead choose to have a static title
title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
),
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text("Michel Clerk"), accountEmail: new Text("[email protected]"),currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? Colors.blue
: Colors.white,
child: Text(
"M",
style: TextStyle(fontSize: 40.0),
),
),),
new Column(children: drawerOptions),
],
),
),
body: _getDrawerItemWidget(_selectedDrawerIndex),
);
}
}
home_fragment.dart
import 'package:flutter/material.dart';
class HomeFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text("Home Screen"),
);
}
}
profile_fragment.dart
import 'package:flutter/material.dart';
class ProfileFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text("Profile Screen"),
);
}
}
aboutus_fragment.dart
import 'package:flutter/material.dart';
class AboutusFragment extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Text("Aboutus Screen"),
);
}
}
You can Download Source Code via Github.
Thanks for sharing your info. I really appreciate your
efforts and I am waiting for your further write ups
thanks once again.
I always prefer to review top quality content.