How to Create Navigation Drawer in Flutter Example (2024)

In this blog, we will explore How to Create Navigation Drawer in Flutter Example with step by step in 2024.
Let's start without wasting time How to create navigation bar in flutter after read this blog you will be proper understand navigation system in flutter.

How to Create Navigation Drawer in Flutter with Example Step by Step in 2024

Step 1 : Create "main.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:my_test_app/screens/home_page.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: const TextTheme(
headlineLarge: TextStyle(
color: Colors.white, fontSize: 25, fontFamily: 'MainFont'),
headlineMedium: TextStyle(color: Colors.black, fontSize: 20),
titleMedium: TextStyle(color: Colors.red, fontSize: 16),
),
useMaterial3: true,
),
home: const HomePage(),
);
}
}

Step 2 : Create "home_page.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:my_test_app/screens/sidebar.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: const SidebarPage(),
appBar: AppBar(
title: const Text('Home Page'),
),
body: Center(
child: SizedBox(
height: 50,
width: 350,
child: FilledButton(
onPressed: () {
Get.back();
},
child: const Text(
'Welcome, Home Page',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}

-> Call "sidebar.dart" file in "home_page.dart" file on drawer section here that means once your application open then navigation drawer visible to top of home page.

Step 3 : Create "profile_page.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ProfilePage extends StatefulWidget {
const ProfilePage({super.key});

@override
State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Profile Page'),
),
body: Center(
child: SizedBox(
height: 50,
width: 350,
child: FilledButton(
onPressed: () {
Get.back();
},
child: const Text(
'Welcome, Profile Page',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}

Step 4 : Create "about_us_page.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class AboutUsPage extends StatefulWidget {
const AboutUsPage({super.key});

@override
State<AboutUsPage> createState() => _AboutUsPageState();
}

class _AboutUsPageState extends State<AboutUsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('About Us Page'),
),
body: Center(
child: SizedBox(
height: 50,
width: 350,
child: FilledButton(
onPressed: () {
Get.back();
},
child: const Text(
'Welcome, About Us Page',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}

Step 5 : Create "help_page.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HelpPage extends StatefulWidget {
const HelpPage({super.key});

@override
State<HelpPage> createState() => _HelpPageState();
}

class _HelpPageState extends State<HelpPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Help Page'),
),
body: Center(
child: SizedBox(
height: 50,
width: 350,
child: FilledButton(
onPressed: () {
Get.back();
},
child: const Text(
'Welcome, Help Page',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}

Step 6 : Create "setting_page.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class SettingPage extends StatefulWidget {
const SettingPage({super.key});

@override
State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Setting Page'),
),
body: Center(
child: SizedBox(
height: 50,
width: 350,
child: FilledButton(
onPressed: () {
Get.back();
},
child: const Text(
'Welcome, Setting Page',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}

Step 7 : Create "sidebar.dart" File in your Lib folder.

import 'package:flutter/material.dart';
import 'package:my_test_app/screens/about_us_page.dart';
import 'package:my_test_app/screens/help_page.dart';
import 'package:my_test_app/screens/profile_page.dart';
import 'package:my_test_app/screens/setting_page.dart';

class SidebarPage extends StatelessWidget {
const SidebarPage({Key? key}) : super(key: key);

final List drawerMenuListname = const [
{
"leading": Icon(
Icons.account_circle,
color: Color(0xFF13C0E3),
),
"title": "Profile",
"trailing": Icon(
Icons.chevron_right,
),
"action_id": 1,
},
{
"leading": Icon(
Icons.animation_rounded,
color: Color(0xFF13C0E3),
),
"title": "About Us",
"trailing": Icon(Icons.chevron_right),
"action_id": 2,
},
{
"leading": Icon(
Icons.help,
color: Color(0xFF13C0E3),
),
"title": "Help",
"trailing": Icon(Icons.chevron_right),
"action_id": 3,
},
{
"leading": Icon(
Icons.settings,
color: Color(0xFF13C0E3),
),
"title": "Settings",
"trailing": Icon(Icons.chevron_right),
"action_id": 4,
},
{
"leading": Icon(
Icons.exit_to_app,
color: Color(0xFF13C0E3),
),
"title": "Log Out",
"trailing": Icon(Icons.chevron_right),
"action_id": 5,
},
];

@override
Widget build(BuildContext context) {
return SafeArea(
child: SizedBox(
width: 280,
child: Drawer(
child: ListView(
children: [
const ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.pixabay.com/photo/2012/04/13/21/07/user-33638_640.png"),
),
title: Text(
"Oversimplified Coding",
style: TextStyle(
color: Colors.black,
),
),
subtitle: Text(
"8997736377",
style: TextStyle(
color: Colors.black,
),
),
),
const SizedBox(
height: 1,
),
...drawerMenuListname.map((sideMenuData) {
return ListTile(
leading: sideMenuData['leading'],
title: Text(
sideMenuData['title'],
),
trailing: sideMenuData['trailing'],
onTap: () {
Navigator.pop(context);

if (sideMenuData['action_id'] == 1) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const ProfilePage(),
),
);
} else if (sideMenuData['action_id'] == 2) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const AboutUsPage(),
),
);
} else if (sideMenuData['action_id'] == 3) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const HelpPage(),
),
);
} else if (sideMenuData['action_id'] == 4) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SettingPage(),
),
);
}
},
);
}).toList(),
],
),
),
));
}
}

-> In the above file we can easily add or customize navigation list according to project requirement.

-> Call above file in "home_page.dart" file on drawer section here that means once your application open then navigation drawer visible to top of home page.

Reference

Here are the reference blog of complete tutorial of How to Create Navigation Drawer in Flutter Example step by step in 2024 you can easily learn and use in your code and below i have attached video if you guys want to learn more then watch below video thank you for your support.

Read More: How to Fetch List from Api in Flutter using Getx

Conclusion

In this blog i have explain you How to Create Navigation Drawer in Flutter Example step by step in 2024. you can easily use this code and modify according to your need.

Final output of this code