Flutter's Flexible Behavior

Question

I want the blue to be full.
But it only spreads up to half.

https://i.stack.imgur.com/UQsiB.png

class TestScene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Flexible(
            fit: FlexFit.loose,
            child: Container(
              color: Colors.red,
              child: const Text('1'),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            child: Container(
              color: Colors.blue,
              child: const Text('1234567890123456789012345678901234567890'),
            ),
          ),
        ],
      ),
    );
  }
}

The reverse will also fail.
https://i.stack.imgur.com/rf00I.png

In both cases, it's nice.
https://i.stack.imgur.com/21ORb.png

Answer 1

Wrap the one that you want to fill the space by Expanded . If you want both red and blue to fill the row, wrap both of them with Expanded and give them their own ratio with the flex property

class TestScene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: <Widget>[
          Container(
              color: Colors.red,
              child: const Text('1'),
            ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: const Text('1234567890123456789012345678901234567890'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

This is a way ! (To take remain space)

String one='1',two='1234567890123456789012345678901234567890';


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor:Colors.white,
      body: Row(
        mainAxisSize:MainAxisSize.max,
        children: <Widget>[
          one.length>=two.length ?
          Expanded(
            child: Container(
              color: Colors.red,
              child: Text(one),
            ),
          ):Container(
              color: Colors.red,
              child: Text(one),
            ),
          two.length>=one.length ?
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Text(two),
            ),
          ):Container(
              color: Colors.blue,
              child: Text(two),
            ),
        ],
      ),
    );
  }

Or to maintain equal size with colors simply use Expanded in both widgets