Adding an interactive top and bottom Navigation Bar in Flutter

Question

I am new to flutter and I am trying to add to navigation bars and top one with three Icons

Tab(icon: Icon(Icons.flight)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_car)),

and a lower navigation bar with differed icons.

I am not sure what I am doing wrong but after was successfull in adding low nav bar I am finding difficulty adding the top navigation bar

Here is the flutter dart code:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.yellow,
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            children: [
              Container(
                color: Colors.yellow,
                child: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.flight)),
                    Tab(icon: Icon(Icons.directions_transit)),
                    Tab(icon: Icon(Icons.directions_car)),
                  ],
                ),
              ),

              Container(color: Colors.orange,),
              Container(
                color: Colors.lightGreen,
              ),
              Container(
                color: Colors.red,
              ),

            ],

          ),

          bottomNavigationBar: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home),
              ),
              Tab(
                icon: Icon(Icons.rss_feed),
              ),
              Tab(
                icon: Icon(Icons.perm_identity),
              ),
              Tab(icon: Icon(Icons.settings),)
            ],
            labelColor: Colors.yellow,
            unselectedLabelColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: Colors.red,
          ),
          backgroundColor: Colors.black,
        ),
      ),
    );
  }
}

Answer 1

In the code that you posted here. The tabbarview has 4 children but you added tab bar as the child of the first tab. So when you switch pages the bar is missed out and has no pages to display. Please check the example code below for a proper layout of a tab bar and tabbar view

DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              // Add Tabs here
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            // Add widgets (tab pages)here
          ],
        ),
      ),

Answer 2

The current issue is your DefaultTabController length is 4 but you are providing 3 tabs, You can include another to fix the issue

child: Scaffold(
  body: TabBarView(
    children: [
      Container(
        color: Colors.yellow,
        child: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.flight)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_car)), //added another here 
          ],
        ),
      ),