Question 128513 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Flutter Alignment Containers

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…..

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search