Top app bar not showing in flutter project-CodePudding

I'm currently starting a small project in flutter and for some reason the top app bar will not show (none of the icons, title or coloured bar at all). Any advice would be much appreciated. The bottom navigation bar seems to work as designed. It runs with no errors just isn't showing the top app bar.

    class MyApp extends StatefulWidget {
      @override
      State<StatefulWidget> createState(){
        return MyAppState();
      }
    }
    
    
    class MyAppState extends State<MyApp> {
     int _selectedPage =0;
     final _pageOptions= [
         FoodPage(),
         RecipePage(),
         AddPage(),
        ShoppingPage(),
      ];
    
  @override
  Widget buildAppBar(BuildContext context) {
    debugShowCheckModeBanner:false;
    return Scaffold(
      appBar:AppBar(
        title:Text('BestB4'),
        backgroundColor: Colors.teal,
        elevation: 20,
         actions: [
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () => {},),
            IconButton(
              icon: Icon(Icons.qr_code_2_rounded),
                onPressed: () => {},)
                ],
              leading: Icon(Icons.menu),
          ));
          
    }
    
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          //title: 'Best B4',
            theme: ThemeData(
             primarySwatch: Colors.teal,),
             home: Scaffold (
                body: _pageOptions[_selectedPage],
                bottomNavigationBar: BottomNavigationBar(
                  type: BottomNavigationBarType.fixed,
                  backgroundColor: Colors.teal,
                  selectedItemColor: Colors.white,
                  iconSize: 40,
                  selectedFontSize: 15,
                  unselectedFontSize: 15,
                  currentIndex:_selectedPage,
                  onTap: (int index) {
                    setState(() {
                      _selectedPage  = index;
                    });
                  },
                  items: [
                    BottomNavigationBarItem(
                      icon:Icon(Icons.restaurant_rounded),label: 'Food',backgroundColor: Colors.teal), //, title:Text('Food')
                    BottomNavigationBarItem(
                      icon:Icon(Icons.menu_book_rounded),label:'Recipes',backgroundColor: Colors.teal),//, title:Text('Recipes')
                    BottomNavigationBarItem(
                      icon:Icon(Icons.add_outlined),label:'Add',backgroundColor: Colors.teal),//, title:Text('Add')
                     BottomNavigationBarItem(
                      icon:Icon(Icons.shopping_cart_rounded),label:'Shopping',backgroundColor: Colors.teal),//,title:Text('Shopping')
                  ],
              ),
          ),
          );
      }}

CodePudding user response：

You should add your appBar inside of your MyAppState build method, like so:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //title: 'Best B4',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('BestB4'),
          backgroundColor: Colors.teal,
          elevation: 20,
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () => {},
            ),
            IconButton(
              icon: Icon(Icons.qr_code_2_rounded),
              onPressed: () => {},
            )
          ],
          leading: Icon(Icons.menu),
        ),
        body: _pageOptions[_selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.teal,
          selectedItemColor: Colors.white,
          iconSize: 40,
          selectedFontSize: 15,
          unselectedFontSize: 15,
          currentIndex: _selectedPage,
          onTap: (int index) {
            setState(() {
              _selectedPage = index;
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.restaurant_rounded),
                label: 'Food',
                backgroundColor: Colors.teal), //, title:Text('Food')
            BottomNavigationBarItem(
                icon: Icon(Icons.menu_book_rounded),
                label: 'Recipes',
                backgroundColor: Colors.teal), //, title:Text('Recipes')
            BottomNavigationBarItem(
                icon: Icon(Icons.add_outlined),
                label: 'Add',
                backgroundColor: Colors.teal), //, title:Text('Add')
            BottomNavigationBarItem(
                icon: Icon(Icons.shopping_cart_rounded),
                label: 'Shopping',
                backgroundColor: Colors.teal), //,title:Text('Shopping')
          ],
        ),
      ),
    );
  }

CodePudding user response：

2 changes required: First:

  @override
 Widget buildAppBar(BuildContext context) {
//changes here
return AppBar(
    title:Text('BestB4'),
    backgroundColor: Colors.teal,
    elevation: 20,
     actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () => {},),
        IconButton(
          icon: Icon(Icons.qr_code_2_rounded),
            onPressed: () => {},)
            ],
          leading: Icon(Icons.menu),
      );
      
}

Second mention this appbar in your build context:

 return MaterialApp(
      //title: 'Best B4',
        theme: ThemeData(
         primarySwatch: Colors.teal,),
         home: Scaffold (
          //here
          appBar: buildAppBar(context)
            body: _pageOptions[_selectedPage],