Read More Tutorial
Flutter Navigation Drawer Example
Hii Flutter developer in this Flutter tutorial, I am sharing how to make Navigation Drawer in a flutter. In this Semple example, we create a Flutter Navigation Drawer Example. Using Flutter you can make app for both platforms Android and iOS. The simple and fast way.
Now talk about Navigation Drawer in a flutter.
When I first created a flutter application with Navigation Drawer it like magic, thanks to flutter development team because with only one line of code we can already see the hare. Flutter Navigation Drawer Example.
Flutter: Creating Drawers
Let’s Start to Flutter Creating Drawers simple way and fast.
Flutter Navigation Drawer Example source
Table of Contents
Main.Dart File Source Code.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final appTitle = 'Drawer Demo'; @override Widget build(BuildContext context) { return MaterialApp( title: appTitle, home: MyHomePage(title: appTitle), ); } } class MyHomePage extends StatelessWidget { final String title; MyHomePage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(title)), body: Center(child: Text('My Page!')), drawer: Drawer( // Add a ListView to the drawer. This ensures the user can scroll // through the options in the drawer if there isn't enough vertical // space to fit everything. child: ListView( // Important: Remove any padding from the ListView. padding: EdgeInsets.zero, children: <Widget>[ // DrawerHeader( // child: Text('Drawer Header'), // decoration: BoxDecoration( // color: Colors.blue, // ), // ), UserAccountsDrawerHeader( accountName: Text("Parmit malik"), accountEmail: Text("codeplayonapp@gmail.com"), currentAccountPicture: CircleAvatar( backgroundColor: Theme.of(context).platform == TargetPlatform.iOS ? Colors.blue : Colors.white, child: Text( "P", style: TextStyle(fontSize: 40.0), ), ), ), ListTile( title: Text('Item 1'), onTap: () { // Update the state of the app // ... // Then close the drawer Navigator.pop(context); }, ), ListTile( title: Text('Item 2'), onTap: () { // Update the state of the app // ... // Then close the drawer Navigator.pop(context); }, ), ], ), ), ); } }
Flutter Navi Drower Source Code On GitHub