I'm working on a project and I got this very intuitive UI problem. I want to structure my widget tree in this way -> NestedScrollView -> TabView -> NestedScrollView -> TabView -> Custom scrollView (I just want to scroll those items in the Tabview page too.).
I'm facing a severe problem. I can only scroll all three views separately. I want to scroll all three together. Is there any way I can solve this? Looking for community support to tackle this issue. I have tried every possible solution which came to my mind.
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
late final TabController _tabControllerParent;
late final TabController _tabControllerChild;
late final ScrollController _scrollController;
@override
void initState() {
super.initState();
_tabControllerParent = TabController(length: 1, vsync: this);
_tabControllerChild = TabController(length: 1, vsync: this);
_scrollController = ScrollController();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.green,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
flexibleSpace: Container(
color: Colors.red,
child: TabBar(
controller: _tabControllerParent,
tabs: [
Tab(
text: 'A',
),
],
),
),
)
];
},
body: TabBarView(
controller: _tabControllerParent,
physics: NeverScrollableScrollPhysics(),
children: [
NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return [
//I want to stick this app bar for that i can use Sliver Persistent Header
//To keep the question simple i used SliverAppBar
SliverAppBar(
flexibleSpace: Container(
color: Colors.black,
child: TabBar(
controller: _tabControllerChild,
tabs: [
Tab(
text: 'One',
),
],
),
),
)
];
},
body: TabBarView(
controller: _tabControllerChild,
physics: NeverScrollableScrollPhysics(),
children: [
//I want to scroll this content vertically.
CustomScrollView(controller: _scrollController, slivers: [
SliverToBoxAdapter(
child: Container(
height: 1500,
child: Text('One'),
color: Colors.yellow,
),
),
]),
]),
),
],
),
),
),
);
}
}
Code will help you to understand the issue better.