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
Column
to aListView
as stated here but it results in another error(something about hasSize). I did setshrinkWrap: true
. - Use
Expanded
on theContainer
but it results in a wonky UI. - Wrapping the Column in a
SingleChildScrollView
but 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!