Флаттер выровнять виджет по центру, а другой вправо - невозможно

Question

Я пытаюсь сделать что-то, что должно быть предельно простым, но не вижу, как это делается.

Мне нужно выровнять большой текст по центру, а кнопки вправо, чтобы он выгляделкак на картинке ниже:

С кодом ниже виджеты выровнены влево и вправо:

    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)),
              ],
            ),
          ),
        ],
      ),
    ),

Я попробовал следующееМетод:

    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)),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

Но это привело к этому:

Не уверен, как или можно ли это сделатьбез ручной настройки ширины контейнера слева, что явно далеко от идеального метода. Флаттер, кажется, отчаянно нуждается в float:right ...

Answer 1

    child: Center(
          child: Container(
            width: 300,
            height: 150,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
            ),
            child: Container(
              child: Stack(
                children: <Widget>[
                  Center(
                    child: Container(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Flexible(
                            child: Text('Centred',
                                style: TextStyle(fontSize: 32)),
                          ),
                          Flexible(
                            child: Text('24.6 %',
                                style: TextStyle(fontSize: 48)),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Container(
                      margin: const EdgeInsets.only(right: 16.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Text('BtnA', style: TextStyle(fontSize: 15)),
                          Text('BtnB', style: TextStyle(fontSize: 15)),
                          Text('BtnC', style: TextStyle(fontSize: 15)),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),

Answer 2

Попробуйте с ListTile Widget, я внес изменения с помощью ListTile, пожалуйста, проверьте, работает ли он для вас

 Center(
    child: Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.all(15),
      width: 300,
      height: 150,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
      ),
      child: ListTile(
        title: Text('Centred',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
        subtitle: Text('24.6 %',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 48)),
        trailing: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('BtnA', style: TextStyle(fontSize: 15)),
            Text('BtnB', style: TextStyle(fontSize: 15)),
            Text('BtnC', style: TextStyle(fontSize: 15)),
          ],
        ),
      ),
    ),
  )