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