Hello Learner! Let’s Deep dive into Drawer Widgets in Flutter, When we hear the word ‘drawer,’ the first question that comes to mind is, ‘What is a drawer?’ Let me explain it to you.
What is a Drawer?
In Flutter a Drawer is a panel that slides in form the side of the screen (usually the left) and shows navigation links of other content. It’s commonly used with the Scaffold widget in Flutter. A Scaffold provides the basic structure of the app, such as the app bar and body, and it has a drawer property to add the drawer.
The AppBar automatically shows a button (the “hamburger” icon) that can open the drawer when it’s available in the Scaffold.
Drawer Widgets in Flutter
Inside the Drawer, you often use a ListView to display items (like navigation options). The first child of the drawer is usually a DrawerHeader that shows some status or info about the user, like their profile info. After that, you can add different items, like ListTile widgets, for navigation options, and it can end with items like an AboutListTile.
Flutter has introduced a new version of the Drawer for apps that use Material 3 design, called NavigationDrawer.
In this code, we know that the main() function is the entry point of the Flutter application, and the runApp() function starts the app by calling the MyApp widget.
Next is MyApp, which is a stateless widget, meaning it doesn’t change its state. The purpose of MyApp is to build a MaterialApp, which provides the basic structure of a Flutter app. The home property inside MaterialApp points to another widget called MyHomePage, which becomes the main screen of the app.
Inside MyHomePage, this class builds the main structure of the app using a Scaffold. Scaffold provides a framework for basic Material Design layout, including app bars, drawers, and the main content of the screen.
Here are a few things to notice:
- Drawer
- A panel that slides in from the left side and contains navigation options of links. \
- ListView
- The contents of the drawer are placed in a scrollable list.
- DrawerHeader
- The top section of the drawer, styled with a blue background, displaying the text “Header”.
- ListTile
- Creates tappable items inside the drawer.
- The first ListTile displays a home icon and text “Home.”
- The second ListTile displays a settings icon and the text “Settings”
- AboutListTile: Displays info about the app, including the app version and name.
- Creates tappable items inside the drawer.
- onTap()
- When a ListTile is tapped, the drawer will close using Navigator.pop(context).
That’s how you can create your Drawer in Flutter. If my guidance helped you, feel free to share your Drawer Widget screenshots in the comment section — I’d love to see it! Don’t forget to share.
Thank you for taking the time to read! Feel free to explore more of our content or leave a comment below.
[…] Flutter 104: The Ultimate Guide to Drawer Widgets in Flutter” Flutter 103: Exploring Bottom Navigation Bar in Flutter Flutter 102: Exploring AppBar in Flutter – Tips and Tricks […]