Building grid layouts with Flutter - flutter

Question

I am very new at Flutter and was confused with how to use the widgets to create a sustainable replacement for Native Androids, RelativeLayout and ConstraintLayout but was not able to use the Column, Row widgets appropriately. I am trying to build this layout but wasn't able to up until now.
I have started by adding a container for the entire thing, then a column for every 'block' and then use Rows/Containers for the rest of them. Here is the code I have written up until now but this doesn't show anything:
Container(
height: 250,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: colorItems // a color list at global scope with 2 items
),
color: Colors.black
),
)
],
),
),
)
Edit
Please give an explanation of your hierarchy of widgets like this:
Container
- Column
- Row

Answer 1

I added a full example of what you are trying to get:
Below is how the widget tree should look like:
WIDGET HEIRARCHY
Container
- Column
- Container
- SizedBox
- Expanded
-Row
- Container
- SizedBox
-Expanded
- Column
- Container
- SizedBox
- Expanded
- Row
- Expanded
- Container
- Expanded
- Container
- Expanded
- Container
CODE
class StackOver extends StatelessWidget {
final BoxDecoration _boxDecoration = BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
15.0,
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tab bar',
),
),
body: Padding(
padding: const EdgeInsets.all(10.0),
// parent container housing all other widgets
child: Container(
height: 250,
child: Column(
children: [
// frist container [give it a height, it takes up the width of the parent]
Container(
height: 80,
decoration: _boxDecoration,
),
// add spacing
SizedBox(
height: 15,
),
// second child of the column [consists of a Row with children]
Expanded(
child: Row( // row
children: [
Container( // first child
width: 80, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
decoration: _boxDecoration,
),
// add spacing
SizedBox( // second child
width: 15,
),
Expanded( // thrid child [consists a column with children ]
child: Column(
children: [
Container(
height: 80, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
decoration: _boxDecoration,
),
// add spacing
SizedBox( // second child
height: 20,
),
Expanded( // third child [consists of a row with 3 containsers]
child: Row(
children: [
Expanded( // first container
child: Container(
decoration: _boxDecoration,
),
),
// add spacing
SizedBox(
width: 15,
),
Expanded( // second container
child: Container(
decoration: _boxDecoration,
),
),
// add spacing
SizedBox(
width: 15,
),
Expanded( // third container
child: Container(
decoration: _boxDecoration,
),
),
],
),
),
],
),
),
],
),
),
],
),
),
),
);
}
}
OUTPUT