The Drawer widget in Flutter serves as a slide-in menu that allows navigation and access to various application features. It is commonly used to create a navigation menu in mobile applications, providing an intuitive user interface.
Key Attributes of the Drawer Widget:
child (Widget):
- Specifies the main content of the drawer. It can be any Flutter widget.
elevation (double):
- Determines the shadow intensity below the drawer.
semanticLabel (String):
- Represents the accessibility label for the drawer.
backgroundColor (Color):
- Sets the background color of the drawer.
semanticLabel (String):
- Represents the accessibility label for the drawer.
Example Usage:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Widget Example'),
),
body: Center(
child: Text('Main Content'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Handle item 1 click
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Handle item 2 click
},
),
],
),
),
);
}
}
In this example, we have a simple Flutter app with a Drawer widget. The drawer attribute of the Scaffold widget is set to a Drawer, which contains a header and two list items. The Drawer slides in from the left when triggered, providing a clean and organized navigation menu for the user.
ย