How to solve: Flutter Alignment Containers

Question

Asked by Nyctophilius on November 10, 2021 (source).

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..... my code looks like

What i aim for

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

Question answered by AHMADAR (source).

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

ANDROID-STUDIO DART FLUTTER
SHARE: