'Top app bar not showing in flutter project

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

flutter dart

Solution 1:^[1]

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

Solution 2:^[2]

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],

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ante Bule
Solution 2	Yash Bhansali

'Top app bar not showing in flutter project

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]