Create navigation drawer (Side menu ) in Flutter: 10 minute
Drawer
Navigation
sidemenu
Flutter
materialUI
- By Code solution
- Jan 20th, 2021
- 0 comments
- 3
Flutter is a mobile App SDK by Google which helps in creating modern mobile apps for iOS and Android using a single(almost) codebase. It’s a new entrant in the cross-platform mobile application development and unlike other frameworks like React Native, it doesn’t use JavaScript but DART as a Programming Language.
Flutter installation steps flow below link
https://flutter.dev/docs/get-started/install
What is a Drawer?
A drawer is an invisible side screen that generally contains menu items and occupies around half of the screen when displayed. If you’ve ever used apps like Gmail, Twitter, etc.
Project Structure
project name .idea //folder which holds the configuration for Android studio. android //Android native app project and is used when building your Flutter application. build //holding the compiled code of your Flutter application. ios //iOS native project which is used when building your Flutter application. lib // lib folder the Dart files which contain the code of your Flutter application. main.dart test //Flutter application automated test when building. .metadata //managed by Flutter automatically and is used to track properties of the Flutter project. .packages //Flutter SDK and is used to contain a list of dependencies for your Flutter project. .projectname.iml //This file is always named according to the project’s name and contains further settings of the Flutter project.Usually, this file is not changed by you and the content is managed by the Flutter SDK in an automated way. pubspec.lock pubspec.yam
The pubspec.yaml file is the project’s configuration file you’ll use a lot when working with your Flutter project. This file contains:
- general project settings like name, description, and version of the project
- project dependencies
- assets (e.g. images) which should be available in your Flutter application
Create and run a simple Flutter app
- Create a new Flutter app by running the following from the command line:
flutter create <project name>
- Create a new app Flutter app with package/bundle id by running the following from the command line:
flutter create --org com.wapptech <project name>
- A
<project name>
the directory is created, containing Flutter’s starter app. Enter this directory:
cd my_app
- To launch the app in the Simulator, ensure that the Simulator is running and enter:
flutter run
Open lib.main.dart file and add this code for navigation drawer :
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main()=> runApp(new Codesolution()); class Codesolution extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme:new ThemeData( primarySwatch:Colors.deepPurple, primaryColor: Colors.deepPurple ), home: new HomePage(), ); } } class HomePage extends StatelessWidget{ @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Home"), elevation: defaultTargetPlatform == TargetPlatform.android ? 5.0:0.0, ), drawer: new Drawer( child: new ListView( padding: const EdgeInsets.all(0.0), children: <Widget>[ new UserAccountsDrawerHeader( accountName: new Text("codesolution"), accountEmail: new Text("info@codesolution.co.in"), currentAccountPicture: new CircleAvatar( backgroundColor:Colors.red, ) ), new ListTile( title:new Text('Page One'), trailing: new Icon(Icons.arrow_upward), ), new ListTile( title:new Text('Page two'), trailing: new Icon(Icons.arrow_downward), ), new ListTile( title:new Text('Page Close'), trailing: new Icon(Icons.close), onTap: ()=>Navigator.of(context).pop(), ) ], ), ), body:new Center( child:new Text('Home Page') ), ); } }
Please run code and check navigation drawer done in your android and ios devices.
Github Link: https://github.com/Sudarshan101/Flutter-navigation-drawer-.git
YouTube Link: https://www.youtube.com/watch?v=cNTfs3uNxS4
Thank you