How can I have my AppBar in a separate file in Flutter while still having the Widgets show?

Question

I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle.

I want my app to have the code for the AppBar separate from the code for each screen for the sake of organization and cleanliness. So, I built KainAppBar.dart as the AppBar code. It is shown here:

import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

GoogleSignIn _googleSignIn = GoogleSignIn(
  signInOption: SignInOption.standard,
);

class KainAppBar extends StatelessWidget {
  final String title;

  KainAppBar(this.title);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: new GradientAppBar(
      centerTitle: true,
      title: new Text('Kain',
      style: TextStyle(
        fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
      )),
      backgroundColorStart: Colors.red[400],
      backgroundColorEnd: Colors.red[900],
    ),
    drawer: new Drawer(
      child: ListView(
        children: <Widget>[
          new UserAccountsDrawerHeader(
            decoration: BoxDecoration(
              color: Colors.red[800],
            ),
            accountName: new Text('Guest'),
            accountEmail: new Text('guestemail@email.com'),
            currentAccountPicture: new CircleAvatar(
              backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
            ),
          ),
          new ListTile(
            title: new Text('Restaurants'),
            leading: Icon(Icons.restaurant_menu),
            onTap: (){
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/restaurant_screen');
            },
          ),
          new ListTile(
            title: new Text('Nearby'),
            leading: Icon(Icons.near_me),
            onTap: (){
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/nearby_screen');
            },
          ),
          new ListTile(
            title: new Text('Request Restaurant'),
            leading: Icon(Icons.library_add),
            onTap: (){
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('/request_screen');
            },
          ),
          new ListTile(
            title: new Text('Settings'),
            leading: Icon(Icons.settings),
            onTap: (){},
          ),
          new ListTile(
            title: new Text('About'),
            leading: Icon(Icons.info_outline),
            onTap: (){},
          ),
          new ListTile(
            title: new Text('Logout'),
            leading: Icon(Icons.power_settings_new),
            onTap: (){
                  _googleSignIn.disconnect();
              FirebaseAuth.instance.signOut().then((value) {
                    Navigator.of(context).pushReplacementNamed('/login');
                  }).catchError((e) {
                     print(e);
                  });
            },
          ),
        ],
      ),
    ),
     body: new Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
            ],
          ),
        )
      ],
    ),

    );

  }
}

For some of my screens, I can declare it with no problem. Here is the code for home_screen.dart:

    class HomeScreen extends StatefulWidget {
      @override
      HomeScreenState createState() {
        return HomeScreenState();
      }
    }

    class HomeScreenState extends State<HomeScreen>{
    @override
      noSuchMethod(Invocation invocation) {
        return super.noSuchMethod(invocation);
      }
    @override
    Widget build(BuildContext context){

      return new KainAppBar("Kain");

      }
    }

However, for my restaurant_screen.dart, I've encountered a problem. For context, what restaurant_screen.dart does is it shows the restaurants included in the app through a TabBar with three options(tabs): Restaurant List, Cuisine List, and History. Which means that apart from the AppBar, it also needs to have a TabBar inside. But I cannot put this TabBar inside KainAppBar.dart because I only need it to show inside restaurant_screen.dart.

Here is my code for the Widget inside restaurant_screen.dart:

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        GradientAppBar(
          title: KainAppBar("Kain"),
          bottom: new TabBar(
            labelColor: Colors.white,
            controller: tController,
            tabs: <Widget>[
              new Tab(text: 'List'),
              new Tab(text: 'Cuisine'),
              new Tab(text: 'Favorites'),
              ],
              ),
              ),
              TabBarView(
                controller: tController,
                children: <Widget>[
                  new firstpage.RestaurantList(),
                  new secondpage.CuisineList(),
                  new thirdpage.RestaurantFavorites(),
                  ],
              ),
      ],
    );
  }

Running the code just shows a black screen. Is there any workaround for this?

Your `KainAppBar` returns more than just an `appbar`, it also has a `listview`, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and put `appBar:` section there. — absin, Nov 21 '18 at 12:26
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file? — stereoputrid, Nov 21 '18 at 12:43
I don't fully understand. You will just have to call the method, check the answer I posted — absin, Nov 21 '18 at 13:28

ck_12 · Answer 1 · 2019-06-14T17:35:44.217

76

This is another way of going about it. By doing this you can customize this appbar to the way you want. That way, if you continue with that style, you don't have to recreate it on every page. You create it once and call on it within any widget.

Class

import 'package:flutter/material.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color backgroundColor = Colors.red;
  final Text title;
  final AppBar appBar;
  final List<Widget> widgets;

  /// you can add more fields that meet your needs

  const BaseAppBar({Key key, this.title, this.appBar, this.widgets})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title,
      backgroundColor: backgroundColor,
      actions: widgets,
    );
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

Implementation within desired page

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: BaseAppBar(
          title: Text('title'),
          appBar: AppBar(),
          widgets: <Widget>[Icon(Icons.more_vert)],
        ),
        body: Container());
  }

edited Jun 14 '19 at 17:35

answered Jun 10 '19 at 03:54

ck_12

875
6
7

2

The final variable 'appBar' must be initialized. – Elia Weiss Jan 07 '20 at 10:36
4

This doesn't work for me, I added the getter and implemented PreferredSizeWidget and still getting the error The getter 'preferredSize' was called on null. Receiver: null Tried calling: preferredSize – Luis Parada Jun 08 '20 at 22:30
8

Instead of having an AppBar instance to get its height, you can use kToolbarHeight: @override Size get preferredSize => new Size.fromHeight(kToolbarHeight); – Axort Nov 19 '20 at 18:47
class MyAppBar extends AppBar with PreferredSizeWidget { MyAppBar({Key key, Widget title}) : super( key: key, title: title, // maybe other AppBar properties ); } – ItSNeverLate Jul 22 '21 at 09:01

score 46 · Answer 2 · edited Jul 31 '21 at 03:01

46

Implement PreferredSizeWidget and override the method like this (kToolbarHeight from material.dart is the default height used by AppBar). Also you can set height as you want.

class NavBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('Hello'),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

edited Jul 31 '21 at 03:01

Suragch

484,302
314
1,365
1,393

answered Oct 01 '20 at 01:19

Johan Ordenes Galleguillos

720
5
11

4

kToolbarHeight is indeed a top level constant from MaterialApp https://api.flutter.dev/flutter/material/kToolbarHeight-constant.html – Alexandre Jean May 17 '21 at 03:46
simple and clean. – Masahiro Aoki Feb 17 '23 at 01:42

absin · Answer 3 · 2019-04-08T11:01:34.807

28

Let's have a widget.dart like so:

import 'package:flutter/material.dart';

class ReusableWidgets {
  static getAppBar(String title) {
    return AppBar(
      title: Text(title),
    );
  }
}

Let's keep using this class to get appbar in all our screens like so:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new ReusableWidgets().getAppBar('Hello World'),
        body:  Text(
            'Flutter Demo Home Page'), 
      ),
    );
  }
}

edited Apr 08 '19 at 11:01

answered Nov 21 '18 at 13:26

absin

1,116
10
21

1

I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here? – stereoputrid Nov 21 '18 at 13:44
1

Try to wrap the `Scaffold()` within a `MaterialApp` in the `KainAppBar` class like this: `return MaterialApp( home: Scaffold(.....),);` You need a `MaterialApp` or a `WidgetsApp` around your widget. They provide the `MediaQuery`. When you call `.of(context)` flutter will always look up the widget tree to find the widget. I think the plugin `GradientAppBar` requires it. – absin Nov 21 '18 at 14:01
Where should I put MediaQuery? – stereoputrid Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said the `GradientAppBar` plugin uses it [here](https://github.com/joostlek/GradientAppBar/blob/84b715689bf284b824a6f15a9e2b53c3ef895e27/lib/gradient_app_bar.dart#L977). Because you are using this plugin, at the root of the widget tree you can have `MaterialApp` – absin Nov 21 '18 at 14:41
Please share updated code in the question, I am afk right now, will take a look – absin Nov 21 '18 at 14:45
Thanks for sharing, but the functionality seems off. The code does run, but upon clicking on of the menus in the side menu, the screen does not show. – stereoputrid Nov 21 '18 at 16:40
Are you sure the routes are set properly? – absin Nov 21 '18 at 16:46
Sounds like you are interacting with routes that have already been removed, anyways check [here](https://github.com/absin1/drawer_dart/blob/master/lib/main.dart) it works perfectly – absin Nov 22 '18 at 03:21
1

Thanks, this save me hours of thinking. Also I think it is good to use `static` before `getAppBar`, so we can save some code. – Ng Sek Long Apr 07 '19 at 13:22

score 18 · Answer 4 · answered Oct 30 '19 at 11:14

You can wrap AppBar into a function that return AppBar.

headerNav.dart

import 'package:flutter/material.dart';

AppBar headerNav({String title}){
  return AppBar(
    title: Text(title),
  );
}

homePage.dart

import 'package:flutter/material.dart';
import 'package:myapp/components/headerNav.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: headerNav(text:'Home Page'),
      body: Container(
        child: Text('Home'),
      ),
    );
  }
}

score 8 · Answer 5 · answered Sep 06 '21 at 12:01

To define your own AppBar, you need to implement preferredSize from the PreferredSizeWidget class. But if you want to keep the default size, you can mimic the original AppBar by creating an internal instance and reference its size like this:

class MyFancyAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;

  const MyFancyAppBar({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(...);
  }

  static final _appBar = AppBar();
  @override
  Size get preferredSize => _appBar.preferredSize;
}

Live Demo

score 3 · Answer 6 · answered Aug 26 '19 at 16:56

if you want to make a custom appbar in a different file so that it can be shared you can just make your new app bar extend it and then pass your customization to super(), in your case your KainAppBar will extend the GradientAppBar like below how MyAppBar extends AppBar.

Ref: https://www.youtube.com/watch?v=cLbNY2nCuYw

class MyAppBar extends AppBar {

  MyAppBar()
      : super(
          elevation: 0,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.search),
              color: Colors.white,
            )
          ]);
}

The problem is that u cannot override the method `createState()` — Elia Weiss, Jan 07 '20 at 10:35

score 1 · Answer 7 · answered Jan 07 '20 at 10:48

Here is an example of creating a AppBar widget

import 'package:flutter/material.dart';

class ListTitleBar extends StatefulWidget implements PreferredSizeWidget {

  final String _left;
  final String _right;

  ListTitleBar(this._left, this._right);

  @override
  State<StatefulWidget> createState() => new ListTitleBarState(_left, _right);

  @override
  Size get preferredSize {
    return new Size.fromHeight(20.0);
  }

}

class ListTitleBarState extends State<ListTitleBar> {

  String _leftTitle;
  String _rightTitle;

  ListTitleBarState(this._leftTitle, this._rightTitle);

  @override
  Widget build(BuildContext context) {

return new Container(

  decoration: new BoxDecoration(
    color: Colors.redAccent,
    border: new Border.all(color: Colors.black),
  ),

  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[

      ///Left Column Title
      new Column(
        children: <Widget>[
          new Container(
            color: Colors.redAccent,
            padding: const EdgeInsets.all(10.0),
            child: new Text(_leftTitle,
              style: new TextStyle(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          )
        ],
      ),

      ///Right Column Title
      new Column(
        children: <Widget>[
          new Container(
            color: Colors.redAccent,
            padding: const EdgeInsets.all(10.0),
            child: new Text(_rightTitle,
              style: new TextStyle(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          )
        ],
      ),

    ],
  ),
);

}

@override
void initState() {
  super.initState();
}

 @override
 void dispose() {
   super.dispose();
 }

}

score 0 · Answer 8 · answered Aug 26 '21 at 10:23

This is the effective way to make Custom app Bar, you can call CustomAppBar.dart on every screen in your app

 import 'package:flutter/material.dart';
 import 'package:vector_math/vector_math.dart' as math;
 import 'package:flutter_a/Screens/utils.dart';
 import 'package:flutter/cupertino.dart';
 class CustomAppBar extends StatefulWidget  with PreferredSizeWidget {

 final Size preferredSize;


 CustomAppBar( {Key key})
     : preferredSize = Size.fromHeight(56.0),
       super(key: key);
 @override
_CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>  {

@override
Widget build(BuildContext context) {
  return AppBar(
    shadowColor: Colors.grey[200],
    bottomOpacity: 1.0,
    title: Text(
      'YOUR CUSTOM APPBAR',
      style: TextStyle(color: Colors.white, fontSize: 16),
    ),
    actions: <Widget>[],
    elevation: 0,
    backgroundColor: Colors.cyan,
    automaticallyImplyLeading: true,
   );
 }

How can I have my AppBar in a separate file in Flutter while still having the Widgets show?

8 Answers8

Live Demo

Linked