I've used TabBar inside bottomNavigationBar and just wanted to know where do I insert content in these tabs. I'm basically creating an app similar to facebook so I need to enter content in these tabs and navigate through them here I'm attaching the code and I'm looking forward for some guidance. Is there a way I could do this without using TabBarView ?

Widget build(BuildContext context) {

Widget menu() {
  return Container(
    color: Colors.white,
    child: TabBar(
      labelColor: Color(int.parse("0xff3A5FCD")),
      unselectedLabelColor: Colors.grey,
      indicatorSize: TabBarIndicatorSize.tab,
      indicatorPadding: EdgeInsets.all(5.0),
      indicatorColor: Colors.blue,
      onTap: (index){
        
      },
      tabs: [
        
        InkWell(
          onTap: (){},
          child: Tab(
            text: "Home",
            icon: Icon(Icons.home,size: 30,),
          ),
        ),
        InkWell(
          onTap: (){
            Navigator.pushNamed(context, MyRoutes.friendsRoute);
            setState(() {
            });
          },
          child: Tab(
            text: "Friends",
            icon: Icon(Icons.people,size: 30,),
          ),
        ),
        InkWell(
          onTap: (){},
          child: Tab(
            text: "Notifications",
            icon: Icon(Icons.notifications,size: 30,),
          ),
        ),
        InkWell(
          onTap: (){},
          child: Tab(
            text: "Menu",
            icon: Icon(Icons.menu,size: 30,),
          ),
        ),
      ],
    ),
  );
}

return DefaultTabController(
  length: 4,  
  child: Scaffold(
    appBar: AppBar(
      elevation: 0,
      foregroundColor: Colors.white10,
      automaticallyImplyLeading: false,
      title: Text("facebook",textScaleFactor: 1.6,style: TextStyle(
        color: Colors.indigo,
        fontWeight: FontWeight.bold
      ),),
      backgroundColor: Colors.white10,
      actions: <Widget>[
        Row(
          children: [
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(28),
                color: Color(int.parse("0xffEBEBEB"))
              ),
             // color: Colors.grey,
              child: IconButton(
                onPressed: () {},
                icon: FaIcon(FontAwesomeIcons.search),
                  color: Colors.black,
                  iconSize: 23,

              ),
            ),
            SizedBox(width: 10,),
            Container(
              width: 50,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(28),
                color: Color(int.parse("0xffEBEBEB"))
              ),
              child: IconButton(
                onPressed: (){},
                icon: FaIcon(FontAwesomeIcons.facebookMessenger),
                  color: Colors.black,
                  iconSize: 23,

              ),
            ),
            SizedBox(width: 10,height: 10,),
          ],
        ),
      ],
    ),

    bottomNavigationBar: menu(),

CodePudding user response：

Set the body of the Scaffold to a TabBarView and set the children of each content like so:

Scaffold:
 body: TabBarView(
  children: [
   Container(child: Text("Home")),
   Container(child: Text("Friends")),
   Container(child: Text("Notifications),
   Container(child: Text("Menu")),
  ]
 ),
),