So basically I am using a NestedScrollView with a column body that holds a TabBar and TabBarView:
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
physics: BouncingScrollPhysics(),
headerSliverBuilder: (context, innerScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
stretch: true,
pinned: true,
collapsedHeight: 400,
backgroundColor: Colors.red,
),
),
SliverList(
delegate: SliverChildListDelegate(
[
SizedBox(height: 20),
Biography(),
SizedBox(height: 20),
],
),
),
];
},
body: Column(
children: [
Container(
child: TabBar(
controller: this.controller,
tabs: [
Tab(icon: Icon(CupertinoIcons.book)),
Tab(icon: Icon(CupertinoIcons.music_albums)),
],
),
),
Expanded(
child: TabBarView(
controller: this.controller,
children: [
// this is in reality a customscrollview
Container(color: Colors.red),
// this is in reality a customscrollview
Container(color: Colors.blue),
],
),
),
],
),
),
);
}
The error:
When I scroll up, i.e my thumb is going toward the bottom of the screen, and the Container that is in the Column reaches the bottom of the screen, it causes an overflow error. The Expanded TabBarView is fine, it's the Container that causes the overflow.
What I've tried:
- I've tried to change the
Columnto aListViewas stated here but it results in another error(something about hasSize). I did setshrinkWrap: true. - Use
Expandedon theContainerbut it results in a wonky UI. - Wrapping the Column in a
SingleChildScrollViewbut it also results in the same error as ListView.
How can I make it so the Container doesn't cause an overflow when it reaches the bottom of the screen?
Thank you!