title: How can I have my AppBar in a separate file in Flutter while still having the Widgets show?
body: <p>I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle. </p>
  
  <p>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 <strong>KainAppBar.dart</strong> as the AppBar code. It is shown here:</p>
  
  <pre><code>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: &lt;Widget&gt;[
            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: &lt;Widget&gt;[
          Container(
            padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: &lt;Widget&gt;[
              ],
            ),
          )
        ],
      ),
  
      );
  
    }
  }
  </code></pre>
  
  <p>For some of my screens, I can declare it with no problem. Here is the code for <strong>home_screen.dart</strong>: </p>
  
  <pre><code>    class HomeScreen extends StatefulWidget {
        @override
        HomeScreenState createState() {
          return HomeScreenState();
        }
      }
  
      class HomeScreenState extends State&lt;HomeScreen&gt;{
      @override
        noSuchMethod(Invocation invocation) {
          return super.noSuchMethod(invocation);
        }
      @override
      Widget build(BuildContext context){
  
        return new KainAppBar("Kain");
  
        }
      }
  </code></pre>
  
  <p>However, for my <strong>restaurant_screen.dart</strong>, I've encountered a problem. For context, what <strong>restaurant_screen.dart</strong> 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 <strong>KainAppBar.dart</strong> because I only need it to show inside <strong>restaurant_screen.dart</strong>. </p>
  
  <p>Here is my code for the Widget inside <strong>restaurant_screen.dart</strong>:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return new Column(
        children: &lt;Widget&gt;[
          GradientAppBar(
            title: KainAppBar("Kain"),
            bottom: new TabBar(
              labelColor: Colors.white,
              controller: tController,
              tabs: &lt;Widget&gt;[
                new Tab(text: 'List'),
                new Tab(text: 'Cuisine'),
                new Tab(text: 'Favorites'),
                ],
                ),
                ),
                TabBarView(
                  controller: tController,
                  children: &lt;Widget&gt;[
                    new firstpage.RestaurantList(),
                    new secondpage.CuisineList(),
                    new thirdpage.RestaurantFavorites(),
                    ],
                ),
        ],
      );
    }
  </code></pre>
  
  <p>Running the code just shows a black screen. Is there any workaround for this? </p>