Flutter Alignment Containers - flutter

Question

So I'm working on my first Project. Basically I want to alignment 4 containers equally. they should have same size H/W so i could scroll on them whenever extra data has been put into them later.....
Here's my Code
Widget build(BuildContext context) {
return Center(
child: Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Row(
children: [
VerticalText1(),
DoBuilder(),
],
),
Column(
children: const [
SizedBox(
width: 10,
)
],
),
Column(
children: [
DecideBuilder(),
],
),
],
),
Row(
children: const [
SizedBox(
height: 10,
)
],
),
Row(
children: [
Row(
children: [
VerticalText2(),
DelegateBuilder(),
],
),
Column(
children: const [
SizedBox(
width: 10,
)
],
),
Align(
alignment: Alignment.bottomLeft,
child: DeleteBuilder(),
),
So I'm working on my first Project. Basically I want to alignment 4 containers equally. they should have same size H/W so i could scroll on them whenever extra data has been put into them later.....So I'm working on my first Project. Basically I want to alignment 4 containers equally. they should have same size H/W so i could scroll on them whenever extra data has been put into them later.....

Answer 1

for me I'm also a beginner in flutter but I know something that if you want actual size for container and you want it to be some kind of responsive you have 2 ways to do that:
first you can use:
(Mediaquery).of(context).size.width or
(media.query).of(context).size.height
that will give you the size of your screen and you can use as much as you need from it for each container for example:
Container(
child:,
width: (MediaQuery.of(context).size.width / 2))
that will give you half of your screen width what ever the device run the app the size will be the same for the screen size
and other way you can use expanded widget:
put every container in expanded widget and give the flex parameter value of one
here is an example:
Row(children:[
Expanded(flex:1,child:Container()),
Expanded(flex:1,child:Container()),]),
expanded will sum the flexes and will divide the space of the screen on element all equal repeat the above code in single Column has 2 Rows and I hope your code will work as you want

Answer 2

Instead of row and column, you should try with the GridView otherwise you can try with media query height and width.
GridView.builder(
itemCount: 4,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return new Card(
child: Container(
color: Colors.green,
child: Center(child: Text("$index"),),
),
);
},
)
And Using Column and row
idget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width-20;
return Scaffold(
appBar: AppBar(
title: Text("widget.title"),
),
body: Stack(
children: [
Column(
children: [
Expanded(
child: Row(
children: [
Container(
height: height / 2,
width: width/2,
color: Colors.green,
),
SizedBox(width: 10,),
Container(
height: height / 2,
width: width / 2,
color: Colors.green,
)
],
),
),
SizedBox(height: 10,),
Expanded(
child: Row(
children: [
Container(
height: height / 2,
width: width / 2,
color: Colors.green,
),
SizedBox(width: 10,),
Container(
height: height / 2,
width: width / 2,
color: Colors.green,
)
],
),
),
],
),
Center(
child: Padding(
padding: const EdgeInsets.only(right:10.0),
child: CircleAvatar(child: Icon(Icons.home),),
),
)
],
),
);
}
Output: