In this post, I want to share you how to use navigate the screen by using Drawer navigation in Flutter. You will see full source code of this post in below.
The Drawer navigation is mainly used for the app menu and it slides over the screen. The drawer provides by Scaffold widget in drawer parameter. In drawer parameter, we can pass Drawer widget. the Drawer widget can have one child widget. Moreover, we can add ListView widget, Drawer Header widget or UserAccount Drawer Header.
Let check full example with Drawer and ListView.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
State<Home> createState() {
return HomeState();
}
}
class HomeState extends State<Home> {
String title = "Home page";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Drawer Example')),
body: Center(child: Text('$title')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Center(child: Text('Drawer Header')),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Home Page'),
onTap: () {
setState(() {
title="Home Page";
});
Navigator.pop(context);
},
),
ListTile(
title: Text('Second Page'),
onTap: () {
setState(() {
title="Second Page";
});
Navigator.pop(context);
},
),
ListTile(
title: Text('Third Page'),
onTap: () {
setState(() {
title="Third Page";
});
Navigator.pop(context);
},
),
const Divider(height: 1),
ListTile(
title: Text('About Page'),
onTap: () {
setState(() {
title="About Page";
});
Navigator.pop(context);
},
),
],
),
),
);
}
}
0 Comments