How can I achieve the following layout in flutter? - flutter

Question

The thing I want to reach is something like this:
These are the main constraints I want to reach:
"text"-s being centered above the lower "button"-s and "thing2" being able to go in between "texts"-s when the screen is short enough.
I want the "button"-s to always be the same height/width (this is easily done by something like SizedBox) and the same distance from the top/bottom .
I want the "thing1" to be x height at max and scale with screen downwards if needed (either by making its texts smaller or making it scrollable, I haven't yet decided, this isn't the main problem).
I want "thing2" to always scale with screen.
When the screen is big enough, I want "thing1" and "thing2" to share the space between them evenly, and each being in the center of its own space.
Right now my layout is the following:
Column: MainAxisAlignment.SpaceBetween, height fixed
Container: height fixed
Row: MainAxisAlignment.SpaceBetween
Button
Button
Container: height fixed
thing1
Container: height calculated based on screen height and other Containers' height
thing2
Container: height fixed
Row: MainAxisAlignment.SpaceBetween
Button
Button
This is of course not all, I tried to include all relevant information about my layout without giving too much information pointlessly.
How would one go about adding the "text"-s above the "button"-s? (I tried Stack, but then I dont't know how to make them appear above the "button"-s while at the same time making "thing2" be above them too.

Answer 1

I managed achieve the things with this code (where MyBox is a simple widget with a colored container with width and height):
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double buttonHeight = 35;
const double buttonWidth = 100;
const double textHeight = 40;
const double textWidth = 30;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.red),
),
),
Align(
alignment: Alignment.topRight,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.yellow),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: textWidth,
height: textHeight,
child: MyBox(Colors.green),
),
),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.cyan),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: textWidth,
height: textHeight,
child: MyBox(Colors.indigo),
),
),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.blue),
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.orange),
),
),
Positioned(
left: 0,
top: 0,
right: 0,
bottom: buttonHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
fit: FlexFit.loose,
child: MyBox(Colors.purple),
),
Flexible(
fit: FlexFit.loose,
child: MyBox(Colors.brown),
),
],
),
),
],
),
);
}
}
TLDR: I used a Stack widget to hold my other widgets, and Align widget to align (duh) my widgets in the Stack.
I used a Column to center my texts above my lower buttons. "mainAxisAlignment: MainAxisAlignment.end" was important so this column is at the bottom and not at the topside.
Finally I wrapped the Stack in a Padding.