**Title:** How to Add an Expandable Navigation Menu in a Drawer in Flutter
**Introduction:**
When it comes to building a mobile app with a navigation menu, a drawer can be a fantastic way to provide easy access to various pages and features. In Flutter, adding a drawer with expandable navigation menu is a relatively straightforward process. In this blog post, we’ll walk you through the steps to create an expandable navigation menu in a drawer in Flutter.
**Step 1: Create a New Flutter Project**
Before we dive into the code, make sure you have Flutter installed on your machine. If you’re new to Flutter, you can follow the official installation guide on the Flutter website.
Create a new Flutter project by running the following command in your terminal:
“`bash
flutter create my_app
“`
**Step 2: Add the Drawer**
In your `my_app` directory, open the `main.dart` file and replace the existing code with the following:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘My App’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘My App’),
),
body: Center(
child: Text(‘Home Page’),
),
drawer: Drawer(
child: ListView(
children: [
ListTile(
title: Text(‘Home’),
onTap: () {
Navigator.of(context).pop();
},
),
ListTile(
title: Text(‘Settings’),
onTap: () {
Navigator.of(context).pop();
},
),
],
),
),
);
}
}
“`
In this code, we’ve added a `Scaffold` widget to our `MyHomePage` widget, and inside the `Scaffold`, we’ve defined an `AppBar` with a title, and a `body` that displays a `Center` widget with a `Text` widget.
We’ve also defined a `drawer` property on the `Scaffold`, which contains a `ListView` widget with two `ListTile` widgets. Each `ListTile` represents a navigation item, and pressing it will pop the drawer.
**Step 3: Add Expandable Navigation Menu**
Now, let’s add expandable navigation menu to our drawer. We’ll use the `ExpansionTile` widget from the `material.dart` library to achieve this.
Replace the existing code in the `Drawer` widget with the following:
“`dart
drawer: Drawer(
child: ListView(
children: [
ExpansionTile(
title: Text(‘Home’),
children: [
ListTile(
title: Text(‘Home Page 1’),
),
ListTile(
title: Text(‘Home Page 2’),
),
],
),
ExpansionTile(
title: Text(‘Settings’),
children: [
ListTile(
title: Text(‘Settings Page 1’),
),
ListTile(
title: Text(‘Settings Page 2’),
),
],
),
],
),
),
“`
In this code, we’ve replaced the `ListTile` widgets with `ExpansionTile` widgets. Each `ExpansionTile` widget has a `title` property that displays the navigation item title, and a `children` property that contains a list of widgets to be displayed when the navigation item is expanded.
**Step 4: Run the App**
That’s it! Run the app by executing the following command in your terminal:
“`bash
flutter run
“`
Open the app on your physical device or emulator, and you’ll see the expandable navigation menu in the drawer. Expand the navigation items to see the sub-items.
**Conclusion:**
In this blog post, we’ve learned how to add an expandable navigation menu in a drawer in Flutter. By using the `ExpansionTile` widget, we can create navigation menus with multiple levels of hierarchy. This design pattern is commonly used in mobile apps to provide easy access to various features and pages.
We hope this tutorial has been helpful. If you have any questions or need further clarification, please leave a comment below!
