How to auto resize text inside a row in flutter

Question

I am trying to replicate the below UI. I want to show a list of items where each item is equally distributed into 3 sections(refer below image). I want to achieve the same responsiveness. But I am not able to put them in perfect order. Here is the mockup:

This is what I achieved:

Here is my code:

Card stockList() {
    return Card(
      child: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Stocks & Values', style: Theme.of(context).textTheme.subtitle,),
            SizedBox(height: 10.0),
            tile1(),
            SizedBox(height: 10.0,),
            Divider(),
            SizedBox(height: 10.0,),
            tile2(),
            SizedBox(height: 10.0,),
            Divider(),
            tile3(),
            SizedBox(height: 10.0,),
            Divider(),
            tile4(),
          ],
        ),
      ),
    );
  }

  Container tile1() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile2() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('22k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
//              SizedBox(height: 2.0,),
//              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
//              SizedBox(height: 2.0,),
//              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('788.27', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 30,125.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile3() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

  Container tile4() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('24k', style: Theme.of(context).textTheme.title,),
                  SizedBox(width: 5.0),
                  Image.asset('assets/country_flags/in.png',width: 20.0,height: 20.0,)
                ],
              ),
              SizedBox(height: 2.0,),
              Text('$currencySymbol 3,678.00', style: Theme.of(context).textTheme.subtitle,),
              SizedBox(height: 2.0,),
              Text('May 3, 13:40 IST', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('35.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('gms', style: Theme.of(context).textTheme.caption,)
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('$currencySymbol 34,355.00', style: Theme.of(context).textTheme.title,),
              SizedBox(height: 2.0,),
              Text('current value', style: Theme.of(context).textTheme.caption,)
            ],
          )
        ],
      ),
    );
  }

Where am I making the mistake? Any idea on how to make this layout responsive so they stay aligned as shown in the mockup.

Answer 1

To make a group of children take the same space between each other, wrap them in Expanded :

Container tile1() {
  return Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          // Your column
        ),
        Expanded(
          // Your column
        ),
        Expanded(
          // Your column
        )
      ],
    ),
  );
}