How can I align elements by Y axis in row with two columns in flutter

Vladislav
October 22, 2024
164 views
0 votes
2 Answers

I have one centered Row in Card and two Column there. How can I align elements by Y axis for icons in two columns (dashed line in screenshot)?

Here’s a code:

Expanded(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SvgPicture.asset(
            "assets/weight_24dp.svg",
            semanticsLabel: 'Thin',
            width: 50,
            height: 50,
          ),
          Text(
            '10',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Text('-'),
          Icon(
            Icons.repeat,
            size: 50,
          ),
          Text(
            '12',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          Text('+')
        ],
      ),
    ],
  ),
),

Adding Text('+') is breaking alignment…

I tried to use Align widget, but it didn’t help me. Of course, I can add SizedBox to first widget and it will fix my problem, but I think this would be bad solution, and I try to find right and clean solution.

UPD:
Here’s a full code of my Card widget:

Card(
  child: Container(
    width: double.infinity,
    padding: const EdgeInsets.all(12.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(       
          'Title',
          style: Theme.of(context).textTheme.titleMedium,
        ),
        Padding(
          padding: const EdgeInsets.only(top: 9.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Subtitle',
                style: Theme.of(context).textTheme.bodyMedium,
              ),
            ],
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.max,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SvgPicture.asset(
                  "assets/weight_24dp.svg",
                  semanticsLabel: 'Thin',
                  width: 50,
                  height: 50,
                ),
                Text(
                  '10',
                  style: Theme.of(context).textTheme.bodyLarge,
                ),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  Icons.repeat,
                  size: 50,
                ),
                Text(
                  '12',
                  style: Theme.of(context).textTheme.bodyLarge,
                ),
                Text('+')
              ],
            ),
          ],
        ),
      ],
    ),
  ),
),

I’ve removed Expanded and then I got expected alignment behavior. But I need to center icons and text like on previous picture, and I don’t know how to do this without Expanded…

Answers

Wrap with Column.
Add to your top Row – crossAxisAlignment: CrossAxisAlignment.start,
Instead of Expanded, use Row – mainAxisSize: MainAxisSize.max,

Example:

...Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.max,
          children: [...

UPD:
Solution via stack, also force columns to min size:

Card(
    child: Container(
      width: double.infinity,
      height: 500,
      padding: const EdgeInsets.all(12.0),
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Title',
                style: Theme.of(context).textTheme.titleMedium,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 9.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Subtitle',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ],
                ),
              ),
            ],
          ),
          Align(
            alignment: Alignment.center,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              mainAxisSize: MainAxisSize.max,
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.add,
                      size: 50,
                    ),
                    Text(
                      '10',
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                  ],
                ),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.add,
                      size: 50,
                    ),
                    Text(
                      '12',
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                    Text('+'),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  )

ur image & icon have different padding, width, height though it looks kinda okay without Expanded but look carefully ur Icons.repeat looks bigger than ur svg.image. So to encounter this u may should use image on both side or icon on both side with same height & width
Incase u may need to use image & icon then go-through this code.
```
class HomeScren extends StatelessWidget {
```

const HomeScren({super.key});

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Row(
              children: [
                Container(width: 100, height: 80, color: Colors.red),
                Expanded(
                  child: Container(
                    color: Colors.black12,
                    child: Column(
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Image.asset(
                                "assets/images/doctor1.png",
                                width: 50,
                                height: 50,
                              ),
                            ),
                            Expanded(
                              child: Icon(
                                Icons.repeat,
                                size: 50,
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            Expanded(
                              child: Text(
                                '10',
                                style: Theme.of(context).textTheme.bodyLarge,
                                textAlign: TextAlign.center,
                              ),
                            ),
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '12',
                                    style:
                                        Theme.of(context).textTheme.bodyLarge,
                                  ),
                                  Text('+')
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

result().

Please signup or login to give your own answer.

Click here to cancel reply.