在行中可用空间内居中小部件

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