My UI guy designed login page like this
ui design
And this is my code.
const SafeArea(
child: Stack(
children: [
LoginSheetTopHero(),
Align(
alignment: Alignment.bottomCenter,
child: RegisterSheet(),// hegith is 389 dp
),
],
),
)
It work well on most phone. However one of my user is using an small screen smartphone and he setting large font. it destry the design , the agreement in bottom is out of container.
no bottom agreement
Adjust the height of RegisterSheet work well , however how to let it auto height?
2
Here is one way of doing that:
CustomScrollView(
primary: false,
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: [
// Your body
Container(
height: 500,
color: Colors.red,
),
// In case you need some padding between the body and the footer
SizedBox(height: 16),
// Let the Spacer occupy all the available space between the body, and the footer
const Spacer(),
// Your footer
Container(
height: 100,
color: Colors.green,
),
// Avoid bottom inset.
SizedBox(height: MediaQuery.paddingOf(context).bottom),
],
),
),
],
)
If there is enough space on the screen, then the body and the footer will be pinned to the top and bottom respectively. And if the screen is too small, and both the body and the footer don’t fit, then the content will become scrollable.
Also you can play around with Expanded and Spacer widgets to layout the body and the footer exactly how you need.