Flutter align widget to centre and another to the right - impossible

Question

I'm trying to do something which should be extremely simple but can't see how it is done.

I need to align the large text to the centre and the buttons to the right so it looks like image below:

With the code below the widgets are aligned left and right:

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colour.darkBlue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Centred', style: TextStyle(fontSize: 32)),
              Text('24.6 %', style: TextStyle(fontSize: 48)),
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('BtnA', style: TextStyle(fontSize: 18)),
                Text('BtnB', style: TextStyle(fontSize: 18)),
                Text('BtnC', style: TextStyle(fontSize: 18)),
              ],
            ),
          ),
        ],
      ),
    ),

I tried the following method:

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colour.darkBlue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Container()),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Centred', style: TextStyle(fontSize: 32)),
                Text('24.6 %', style: TextStyle(fontSize: 48)),
              ],
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('BtnA', style: TextStyle(fontSize: 18)),
                  Text('BtnB', style: TextStyle(fontSize: 18)),
                  Text('BtnC', style: TextStyle(fontSize: 18)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

But it resulted in this:

Not sure how or whether it can be done without manually setting a width for the container on the left which is clearly a far from ideal method. Flutter seems to desperately need float:right...

Answer 1

You was almost there. Just "Expanded" in the middle should be removed:

    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Container()),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Centred', style: TextStyle(fontSize: 32)),
              Text('24.6 %', style: TextStyle(fontSize: 48)),
            ],
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('BtnA', style: TextStyle(fontSize: 18)),
                  Text('BtnB', style: TextStyle(fontSize: 18)),
                  Text('BtnC', style: TextStyle(fontSize: 18)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),