fluttertabsnestedscrollview

Nestedscrollview scroll every other tabs


I'm using a Nestedscrollview on my application that have multiple tabs,

now the problem is: Whenever I scroll down or up on one of my tabs the other tabs also scrolls down or up, is there a way to avoid this behavior?

thanks

There is my code

return Scaffold(
  body: DefaultTabController(
    length: 5,
    child: NestedScrollView(
      headerSliverBuilder: (context, value) {
        return [
          SliverAppBar(
            floating: true,
            snap: true,
            pinned: true,
            title: Text(
              'MyApp',
              style: GoogleFonts.cookie(
                textStyle: TextStyle(
                  fontSize: 35.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
            actions: <Widget>[
              Search(),
              IconButton(
                icon: Icon(Icons.home_rounded),
                iconSize: 25,
                onPressed: () {
                  Navigator.of(context).pushNamed(FeedScreen.routeName);
                },
                color: Colors.white,
              ),
            ],
            backgroundColor: Theme.of(context).colorScheme.secondary,
            bottom: TabBar(
              labelColor: Colors.amber,
              labelStyle: TextStyle(
                fontSize: 17.0,
                fontWeight: FontWeight.bold,
              ),
              
              isScrollable: true,
              tabs: myTabs,
            ),
          ),
        ];
      },
      body: TabBarView(
        children: [
          
          EducationScreen(),
          FamilleScreen(),
          SportsScreen(),
          InfosScreen(),
          PolitiqueScreen(),
        ],
      ),
    ),
  ),
);

Solution

  • NestedScrollView is the child and TabBarView is under it. Means every child is effected by same NestedScrollView that's why you are getting the same scroll position on every tab, You need to apply scrollable functionality on TabBarView's children.

    You can simply follow this widget.

    return DefaultTabController(
          length: 5,
          child: Scaffold(
            appBar: AppBar(
              title: Text(
                'MyApp',
                style: GoogleFonts.cookie(
                  textStyle: TextStyle(
                    fontSize: 35.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.home_rounded),
                  iconSize: 25,
                  onPressed: () {},
                  color: Colors.white,
                ),
              ],
              backgroundColor: Theme.of(context).colorScheme.secondary,
              bottom: TabBar(
                labelColor: Colors.amber,
                labelStyle: TextStyle(
                  fontSize: 17.0,
                  fontWeight: FontWeight.bold,
                ),
                isScrollable: true,
                tabs: List.generate(5, (index) => Text("tab $index")),
              ),
            ),
            body: TabBarView(
              children: [
                ...List.generate(
                  5,
                  (index) => SingleChildScrollView( // you can choose `CustomScrollView` for better 
                    child: Container(
                      color: index.isEven ? Colors.green : Colors.cyanAccent,
                      child: Column(
                        children: [
                          ...List.generate(
                              44,
                              (y) => Container(
                                    height: 100,
                                    child: Text("tab $index item $y"),
                                  ))
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }