How to build a layout using CustomScrollView such that the bottom block:
- Is in-line with other Slivers when the screen is small and view is scrollable
- Is aligned to the bottom edge when screen is sufficiently big, but view is not scrollable
Don’t want to use LayoutBuilder as the content of the blocks may vary e.g. depending on the font size, content shown etc.
Additionally, the content may be shown in a modal bottom sheet, so in a scrollable environment wrapping entire CustomScrollView. We can access the modal bottom sheet’s controller.
CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 100,
color: Colors.blue,
),
),
SliverToBoxAdapter(
child: Container(
height: 300,
color: Colors.green,
),
),
SliverToBoxAdapter(
child: Container(
height: 300,
color: Colors.orange,
child: Center(
child: Text(
'Keep me either aligned to the bottom or in-line with other slivers'),
),
),
),
],
),
2
Answers
I think I've found the solution, by using SliverFillRemaining's
fillOverscroll: false, hasScrollBody: false,
arguments and putting the child withinAlign
:Updated DartPad
Not sure if you can acheive that in a CustomScrollView.
Here is a workaround that might help