In this article I am going to talk about how we can use the navigation drawer using the flutter
Now let's talk about the navigation drawer in Flutter.
When I first created and applied with the navigation drawer, it felt like magic, thanks to the development team for this because with only one line of code we can already see the hamburger icon.
return Scaffold(
appBar: AppBar(
title: Text("Drawer app"),
),
drawer: Drawer(),//this will just add the Navigation Drawer Icon
),
Now if we want to add items in the drawer we have give the child inside Drawer()
drawer: Drawer(
child:,
),
Now I’ll add a ListView as a child of Drawer Widget
drawer: Drawer(
child: ListView(
children: <Widget>[],
),
),
I can add as many as Widgets inside the listView.
drawer: Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text("Ttem 1"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
title: Text("Item 2"),
trailing: Icon(Icons.arrow_forward),
),
],
),
),
Let us see the complete code of the above steps. Open the main.dart file and replace the following code.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final appTitle = 'Flutter Drawer Demo';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text(
'Welcome To Code With Android.',
style: TextStyle(fontSize: 20.0),
)
),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text("Geeta Choubey"),
accountEmail: Text("xyz@gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.redAccent,
child: Text(
"G",
style: TextStyle(fontSize: 40.0),
),
),
),
ListTile(
leading: Icon(Icons.home), title: Text("Home"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.settings), title: Text("Settings"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.contacts), title: Text("Contact Us"),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}
Now, run the app in Android Studio. It will give the following screen.
When you click on the top left corner screen is
open like this.
Happy Coding enjoy Flutter with code with android JJ
0 Comments