Htykuut

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?

Let's have a widget.dart like so:

import 'package:flutter/material.dart';



class ReusableWidgets {

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

      ),

    );

  }

}