How to create a constraint on each Widget in a Row that is equally divided by MainAxisAlignment.spaceBetween Flutter

Question

So I have a view like this:

With code like this:

Container(
  margin: EdgeInsets.only(top: 24),
  padding: EdgeInsets.all(20),
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    gradient: LinearGradient(
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      colors: [
        kPrimaryColor,
        kPrimaryDarkColor,
      ],
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 1,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        '03.X000003.01',
        style: greyTextStyle.copyWith(
          fontWeight: light,
          fontSize: 12,
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            '1,234',
            style: whiteTextStyle.copyWith(
              fontSize: 28,
              fontWeight: semiBold,
            ),
          ),
          SizedBox(width: 4),
          Text(
            'Points',
            style: whiteTextStyle.copyWith(
              fontWeight: medium,
            ),
          ),
        ],
      ),
      SizedBox(height: 30),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Card Holder',
                  style: whiteTextStyle.copyWith(
                    fontSize: 10,
                    fontWeight: light,
                  ),
                ),
                Text(
                  'Muhammad Faisal asdf asdf asdf asdf',
                  style: whiteTextStyle.copyWith(
                    fontSize: 12,
                    fontWeight: medium,
                  ),
                ),
              ],
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Card Type',
                style: whiteTextStyle.copyWith(
                  fontSize: 10,
                  fontWeight: light,
                ),
              ),
              Text(
                'Super VIP Member asdf asdf asdf',
                style: whiteTextStyle.copyWith(
                  fontSize: 12,
                  fontWeight: medium,
                ),
              ),
            ],
          ),
        ],
      ),
    ],
  ),
);

At this time the text was overflowed to the right.

I've tried wrapping the Column() widget with a Flexible() widget as well as Expanded().. Yes this removes overflowed but the middle line between the two is inconsistent.

What I want is, when I fill in the Name field and the name is long, then the text will continue downwards instead of right, with a fixed center constraint based on MainAxisAlignment.spaceBetween.

How to make that? Thank you

Answer 1

You can wrap both Column with Expanded widget.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Card Holder',
          ),
          Text(
            'Muhammad Faisal asdf asdf asdf asdf',
          ),
        ],
      ),
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Card Type',
          ),
          Text(
            'Super VIP Member asdf asdf asdf',
          ),
        ],
      ),
    ),
  ],
),