Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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.

No any Comments on this Article


Please Wait...