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

Refresh

April 2019

Views

902 time

1

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('[email protected]'),
            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?

1 answers

3

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'), 
      ),
    );
  }
}