flutter - 行中可用空间内的中心小部件

Question

请协助创建这样的布局，图标在左侧，文本在左侧可用空间内居中。

每次能想到的居中和对齐我都试过了。但我最终没有任何工作，例如

我试过的一些代码:

            Row(
//                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//                mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                mainAxisAlignment: MainAxisAlignment.spaceAround,
//                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  buttonIcon,
                  Text(
                    buttonTitle,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.orange,
                    ),
                  ),
                ],
              ),

Answer 1

您可以使用 ListTile 小部件代替 Row 小部件并获得非常相似的结果，如下所示:

ListTile(
  title: Text('NAVIGATE HERE', style: TextStyle(....// your text style)),
  leading: Icon(Icons.some_icon)
)

如果您仍然希望使用 Row 小部件，您可以使用 Expanded 小部件作为其子部件的一部分来实现此目的，例如:

Row(
  children: <Widget> [
    Padding(
     padding: EdgeInsets.only(left: someValue),
     child: Icon(Icons.some_icon)
    ),
    Expanded(
     Align(
      alignment:Alignment.center,
      child: Text('NAVIGATE HERE')
     )
    )
  ]
)