flutter onboarding - how to keep "proportions"? - flutter

Question

I created onboarding in my flutter app:
This is my data model:
class Data {
final String image;
final String title;
final String desc;
Data(this.image, this.title, this.desc); }
final List<Data> items = [
Data('assets/1.png', '1', '1'),
Data('assets/2.png', '2', '2'),
Data('assets/3.png', '3', '3')
];
This is my code:
Scaffold(
body: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: [
PageView.builder(
controller: _pageController,
itemBuilder: (BuildContext context, int index) {
var item = items[index];
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover,
),
),
//bloc1
child: Padding(
padding: const EdgeInsets.only(bottom: 80),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text(item.title), Text(item.desc)],
),
),
);
},
),
//bloc 2
SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const Padding(
padding: EdgeInsets.only(bottom: 10, top: 10),
child: Text('****dots indicators****'),
),
TextButton(
onPressed: () {},
child: Text('Next'),
)
],
))
],
),
);
This onBoading consists of three parts:
background image
text block - block1
"lower action block" - block2.
I need to have a small fixed distance between blocks 1 and 2 - 10pх.
but also I can't place block1 and block2 together. I need block1 to be "inside" PageView, block2 on the main page.
right now I'm using the bottom padding. but this is not a reliable solution - this size may change on different screens - "overlapping" will occur.
how can I fix this problem? Any advice - I'll be very grateful.

Answer 1

If you want to position your "page indicator dots" at a fixed relative spot, for example, 10% from the bottom of the screen, an easy solution is to use the Align widget.
However in your case, you must also change the Column in your to MainAxisSize.min, so that its height will be as small as possible, leaving you enough freedom to decide where to position the Column vertically. For example:
SafeArea(
child: Align(
alignment: Alignment(0, 0.95), // relative position
child: Column(
mainAxisSize: MainAxisSize.min, // make Column shorter
children: [
Text('****dots indicators****'),
TextButton(
onPressed: () {},
child: Text('Next'),
)
],
),
),
),
For the alignment property of the Align widget, the values are (x, y) ranging from -1 to +1, with 0 being the center. For example, you can use alignment: Alignment(0, -0.5) to make it center horizontally, and 50% towards the top on the vertical axis.