Navigation Drawer in Flutter

In Flutter, Navigation Drawer contains list of Items that swipe left to Right. It’s very easy to implement Navigation drawer in Flutter unlike Android. This is the Navigation Drawer Widget Video :

Navigation Drawer Demo in Flutter
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text("Navigation Drawer")),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: const <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Messages'),
              ),
              ListTile(
                leading: Icon(Icons.account_circle),
                title: Text('Profile'),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
              ),
            ],
          ),
        ),
        body: Center(
            child: Column(children: [
          SizedBox(height: 10),
          Text("Navigation Drawer Example"),
        ])),
      ),
    );
  }
}

Flutter provide drawer property in Scaffold Widget to show Drawer in App.

  • Drawer contains ListView Child for vertical scrollable list
  • DrawerHeader: It’s contain Text Widget and show in header view
  • ListTile: ListTile is the ListView Item that has pre built property to show proper list like leading – to show left side widget, title – show title of the item, subtitle – show text below title, trailing – show right side widget

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *