flutterdartlayoutwidgetalignment

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


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)?

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... enter image description here


Solution

    1. Wrap with Column.
    2. Add to your top Row - crossAxisAlignment: CrossAxisAlignment.start,
    3. 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('+'),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )