- Customizing Fonts in Flutter with ExampleFlutter Skeleton Text with ExampleFlutter Themes with ExampleFlutter Lazy Loader with ExampleFlutter UI Orientation with ExampleFlutter Animation in Route Transition with ExampleFlutter Physics Simulation in Animation with ExampleFlutter Radial Hero Animation with ExampleFlutter Hinge Animation with ExampleFlutter Lottie Animation with Example
- URLs in Flutter with ExampleRoutes and Navigator in FlutterFlutter WebSockets with ExampleFlutter Named Routes with ExampleFlutter Arguments in Named RoutesMulti Page Applications in FlutterFlutter Updating Data on the InternetFlutter Fetching Data From the InternetFlutter Deleting Data On The InternetFlutter Sending Data To The InternetFlutter Send Data to Screen with Example
Drawer Widget in Flutter
In Flutter, a Drawer
widget is a panel that slides in from the left or right side of the screen and provides a space for navigation or other content that the user can access at any time. It is typically used to provide access to app settings, user profiles, or other common features.
To create a Drawer
widget in Flutter, we can use the Drawer
class along with other widgets such as ListTile
and DrawerHeader
to build the content of the drawer.
Here's an example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: Text(
'Welcome to my app!',
style: Theme.of(context).textTheme.headline4,
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
Navigator.pop(context);
// Navigate to the settings screen
},
),
ListTile(
leading: Icon(Icons.person),
title: Text('Profile'),
onTap: () {
Navigator.pop(context);
// Navigate to the profile screen
},
),
],
),
),
);
}
}
In this example, we create a simple app with a home screen and a Drawer
widget. We use the Scaffold
widget to create the basic UI with an app bar and a centered text widget. We also define a Drawer
widget and set its child to a ListView
with a DrawerHeader
widget and two ListTile
widgets.
The DrawerHeader
widget displays a blue background with white text that says "Drawer Header". The ListTile
widgets represent navigation items for the user to tap on, and each ListTile
has an icon, a title, and an onTap
function that pops the drawer and navigates to the corresponding screen.
By using the Drawer
widget in our Flutter app, we can provide a convenient and accessible way for users to access common features and navigation items.