NestedScrollView with tabBar and bottomNavigationBar is not working

Question

I am trying to use tabBarView & bottomNavigationBar in a nestedScrollView. Result is multiple tabBarviews and multiple bottomNavigationBars. pls, see

My tabBar class is:

    class TabScreen extends StatefulWidget {

     TabScreen({Key? key}) : super(key: key);
   @override
   TabScreenState createState() => TabScreenState();
}

   class TabScreenState extends State<TabScreen> with 
   SingleTickerProviderStateMixin {
    TabController? controller;

    int selectedIndexForBottomNavigationBar = 0;
    int selectedIndexForTabBar = 0;

 void onItemTappedForBottomNavigationBar(int index) {
      setState(() {
  selectedIndexForBottomNavigationBar = index;
  });
}

 void onItemTappedForTabBar(int index) {
  setState(() {
  selectedIndexForTabBar = index + 1;
  selectedIndexForBottomNavigationBar = 0;
   });
 }

 static List listOfIconsForTabBar = [
  UserHomeMerch(), UserHomeNgo()
 ];

 static List listOfIconsForBottomNavigationBar = [
  TabScreen(), Search(), Activities(), ProfileScreen()
 ];

@override
 void initState() {
   super.initState();
  controller = TabController(length: 2, vsync: this);
}
   @override
 Widget build(BuildContext context) {
 return Scaffold(
    body: NestedScrollView(
        headerSliverBuilder: (BuildContext context,
            bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              pinned: false,
              backgroundColor: Colors.transparent,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 200.0,
                      width: double.infinity,
                      color: Colors.grey,
                      child: Image.asset('assets/images/helpSupp.jpg'),
                    ),
                  ],
                ),
              ),
              expandedHeight: 220.0,
              bottom: TabBar(
                indicatorColor: color4,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 5,
                labelColor: Colors.black,
                tabs: [
                  Tab(icon: Icon(Icons.shopping_bag_outlined), text: 'Products',),
                  Tab(icon: Icon(Icons.handshake_outlined), text: 'Events',),
                ],
                controller: controller,
              ),
            )
          ];
        },
        body: Center(child: selectedIndexForTabBar == 0 ?
  listOfIconsForBottomNavigationBar.elementAt(
      selectedIndexForBottomNavigationBar) :
  listOfIconsForTabBar.elementAt(selectedIndexForTabBar - 1)),
      
    ),
  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: color4,
    onTap: onItemTappedForBottomNavigationBar,
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.home_outlined),
      label: ''),
      BottomNavigationBarItem(
          icon: Icon(Icons.search),
      label: ''),
      BottomNavigationBarItem(
          icon: Icon(Icons.notification_important_outlined),
      label: ''),
      BottomNavigationBarItem(
        icon: Icon(Icons.account_circle_outlined),
      label: ''),
    ],
    currentIndex: selectedIndexForBottomNavigationBar,
    ),
   );
 }
}

I tried to get the bottomNavigation bar into a different class, however then it also gives me an error.

This log gives an error related to NestedScrollView . Both UserHomMerch and UserHomeNgo are simple ListView containing classes.

How can I solve this issue? Thanks in advance!

Answer 1

You can put your app bar out of NestedScrollview or inside of SliverOverlapObsorber,

: NestedScrollView(
      controller: cont,
      headerSliverBuilder:
          (BuildContext contextt, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
              contextt,
            ),
            sliver: storeTabs(rt, context),
          )
        ];
      },
    

And tabbarview should be inside of expanded widget like this

: NestedScrollView(
      controller: cont,
      headerSliverBuilder:..
      body: Colmn(
        ch: [
          Expanded(
            child: TabBarView(
              children: [..