Question 79936 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I manage alignment with multiple rows and columns? – Flutter

I’m trying to make a card with some elements.
However it is hard to locate elements in right place with multiple rows and columns.
I tried with mainAxisAlignment, crossAxisAlignment, SizedBox, Expanded and so on.
Especially using Expanded make my widget disappear unlike my expectation.
How can I locate element to right place?

What I did
What I want

child: Container(
padding: EdgeInsets.all(10),
    child: Column(
        children:[
            Text('1'),
            Container(
                child: Row(
                    children:[
                        ClipRRect(
                            borderRadius: BorderRadius.circular(50),
                            child: Container(
                                width: 70,
                                height: 70,
                                color: Color(0xffD9D9D9),
                            ),
                        ),
                        Column(
                            children:[
                                Row(
                                    children:[
                                    Text('2'),
                                    Text('3'),
                                    Text('4'),
                                    ],
                                ),
                                Row(
                                    children:[
                                    Text('5'),
                                    Text('6')
                                    ]
                                ),
                                Row(
                                    children:[
                                    Text('7'),
                                    Text('8'),
                                    Text('9'),
                                    Text('10'),
                                    ],
                                ),
                            ],
                        ),
                    ],
                ),
            ),
            ],

        ),
    ),
Tags:

2

Answers


  1. 0

    This must work

    Container(
      padding: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children:[
          Text('1'),
          Container(
            child: Row(
              children:[
                ClipRRect(
                  borderRadius: BorderRadius.circular(50),
                  child: Container(
                    width: 70,
                    height: 70,
                    color: Color(0xffD9D9D9),
                  ),
                ),
                Expanded(
                  child: Column(
                    children:[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children:[
                          Expanded(
                            child: Row(
                              children: [
                                Text('2'),
                                Text('3'),
                              ],
                            ),
                          ),
                          Expanded(child: Row(
                            children: [
                              Text('4')
                            ],
                          )),
                        ],
                      ),
                      Row(
                          children:[
                            Text('5'),
                            Text('6')
                          ]
                      ),
                      Row(
                        children:[
                          Expanded(child: Row(
                            children: [
                              Text('7'),
                              Text('8'),
                            ],
                          )),
                          Expanded(child: Row(
                            children: [
                              Text('9'),
                              Text('10'),
                            ],
                          ))
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],

      ),
    )
    Login or Signup to reply.
  2. 0

    Here you go, this should be work as you wanted. i’ve tried to run it and yep it work

        Container(
          padding: const EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const Text('1'),
              Row(
                children: [
                  Flexible(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(100),
                      child: Container(
                        width: 70,
                        height: 70,
                        color: const Color(0xffD9D9D9),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                PaddingText(text: "2"),
                                PaddingText(text: "3")
                              ],
                            ),
                            Row(
                              children: [
                                PaddingText(text: "4"),
                              ],
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                PaddingText(text: "5"),
                                PaddingText(text: "6")
                              ],
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                PaddingText(text: "7"),
                                PaddingText(text: "8")
                              ],
                            ),
                            Row(
                              children: [
                                PaddingText(text: "9"),
                                PaddingText(text: "10")
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),

    and dont forget to add this to your project

    class PaddingText extends StatelessWidget {
  PaddingText({Key? key, required this.text}) : super(key: key);
  String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 5.0),
      child: Text(text),
    );
  }
}

    enter image description here

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

Back To Top
Search