How to Make Reusable App Bar and Drawer in Flutter

A single app may have lots of routes or pages, but to make an App bar and Drawer for every page is very hard and not a good practice. So you should make a reusable App bar and drawer layout so that, you can manage only a single code for every page. The outputs of this example are like below:

View the example below and learn how to make a reusable App Bar and Drawer Layout in your app.

Our File Directory

• lib/
• —- main.dart
• —- home.dart
• —- appbar.dart //code of App bar
• —- app_drawer.dart //code for drawer

main.dart

import 'package:flutter/material.dart';
import 'home.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Home(),
    );
  }
}

appbar.dart

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

Widget myAppBar(String title){
   return AppBar(
      backgroundColor: Color.fromRGBO(156,204,101, 1),
      //background color of Appbar to green
      title: Text(title),
      actions: <Widget>[
          IconButton( 
             icon: Icon(Icons.search),
             onPressed: (){
                 //action for search icon button
             },
          ),

          IconButton( 
             icon: Icon(Icons.person),
             onPressed: (){
                 //action for user icon button
             },
          )
      ],
   );

}

You can further modify, attributes according to your need.

app_drawer.dart

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

Widget myDrawer(){
   return Drawer(
       child: SingleChildScrollView(
           child:Container( 
               margin:EdgeInsets.only(top:50),
               child:Column(children: <Widget>[
                
                 ListTile( 
                    leading:Icon(Icons.home),
                    title:Text("Home"),
                    onTap:(){
                        // Home button action
                    }
                 ),

                 ListTile( 
                    leading:Icon(Icons.person),
                    title:Text("My Profile"),
                    onTap:(){
                        // My Pfofile button action
                    }
                 ),

                 ListTile( 
                    leading:Icon(Icons.search),
                    title:Text("Find Peoples"),
                    onTap:(){
                        // Find peoples button action
                    }
                 )

                 //add more drawer menu here

            ],)
          )
       ),
   );
}

home.dart

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

//importing file app_drawer.dar and appbar.dart
import 'package:studentlist/app_drawer.dart';
import 'package:studentlist/appbar.dart';

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.green[100],
        appBar: myAppBar("Home Page"), 
        //set app bar from appbar.dart
        // use like this where ever you want
        drawer: myDrawer(),
        //set drawer from app_drawer.dart
        //set like this where ever you want
        body: Center(
          child: Text("Reusable Drawer and Appbar",
                     style: TextStyle(fontSize: 20),
                 )
        )
    );
  } 
}

Call myAppBar() and myDrawer() widget function where ever you want.

In this way, you can make reusable AppBar and Drawer in Flutter App.