Flutter: Create a sidebar navigation

creating a sidebar with flutter

Create a new file named nav_bar.dart in the lib folder of your project.

Now in nav_bar.dart, import material design and create a NavBar class that extends StatelessWidget. Inside the class, override build Widget and return Drawer().

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      

    );
  }
}

Now, we need to import nav_bar.dart into main.dart file and add the drawer in the Scaffold.

import 'package:flutter/material.dart';
import 'nav_bar.dart';

......

return Scaffold(
      drawer: NavBar(),
      ..
);

In my case, the main.dart file looks as follows:

import 'package:flutter/material.dart';
import 'nav_bar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Learning Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Learning Flutter Home'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text("Trying to learn flutter"),
      ),
      drawer: NavBar(),
    );
  }
}

In order to create list of items in the sidebar, we will be using ListView() widget. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction.

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [],
      ),
    );
  }
}

Inside a children’s property we can add UserAccountsDrawerHeader() to create a user account header where we can display the name, email and profile picture.

UserAccountsDrawerHeader class is a material design Drawer header that identifies the app’s user. For a drawer header that doesn’t show user accounts, use DrawerHeader.

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        // Remove padding
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text('Some Name'),
            accountEmail: Text('[email protected]'),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://www.pinkvilla.com/imageresize/justice-league-snyder-cut-batman.jpg?width=752&format=webp&t=pvorg',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage('https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg')
              ),
            ),
          ),
        ],
      ),
    );
  }
}

accountEmail is a widget that represents the email address of the user’s current account. It is displayed on the left, below the accountName.

accountName is a widget that represents the user’s current account name. It is displayed on the left, below the currentAccountPicture.

currentAccountPicture is a widget placed in the upper-left corner that represents the current user’s account. Normally a CircleAvatar.

decoration is used for the header’s background. 


To add navigation links inside our sidebar, we’ll use ListTile() widget. A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as check boxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters. 

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text('Some Name'),
            accountEmail: Text('[email protected]'),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://www.pinkvilla.com/imageresize/justice-league-snyder-cut-batman.jpg?width=752&format=webp&t=pvorg',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
                color: Colors.blue,
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image: NetworkImage(
                        'https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg'))),
          ),
          ListTile(
            leading: Icon(Icons.accessibility),
            title: Text('Accessibility'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Person'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.share),
            title: Text('Share'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.notifications),
            title: Text('Notifications'),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () => null,
          )
        ],
      ),
    );
  }
}

Output