Create navigation drawer (Side menu ) in Flutter: 10 minute

Drawer Navigation sidemenu Flutter materialUI

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>
  • <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

About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments

Add comment To Login
Add comment