全角按钮，如何对齐文本

Question

尝试找出我是否可以在全角按钮（即具有 width: double.infinity

例如：

ButtonTheme(
  minWidth: double.infinity,
  child: FlatButton(
    onPressed: () {},
    child: Text('Sign Out', textAlign: TextAlign.left),
  ),
)

产生一个居中的文本按钮，并且无法更改对齐方式。

我尝试了一些操作，但无法弄清楚，除非尝试创建自定义按钮。

我正在尝试使用text：left表示全角按钮，以便用户可以在行中的任何位置单击，并仍然获得素材的点击效果。

Answer 1

我发现RawMaterialButton孩子的构建方法始终居中：

child: Center(
  widthFactor: 1.0,
  heightFactor: 1.0,
  child: widget.child,
),

要使文本与开始/左对齐，可以给它提供无限大的字体，使其与父级“中心”小部件一样宽。

child: FlatButton(
  child: SizedBox(
    width: double.infinity,
    child: Text(
      'Sign out',
      textAlign: TextAlign.left,
    ),
  ),
  onPressed: () {},
);

Answer 2

一个简单的解决方法是将对齐按钮文本设置Alignment.centerLeft为 -

  MaterialButton(
  onPressed: () {},
    textColor: Colors.white,
    color: Colors.grey,
    child: Align(
       alignment: Alignment.centerLeft,
        child: Text(
           'SUBMIT',
            style: TextStyle(
            fontSize: 18, fontWeight: FontWeight.normal),
              ),
        ),
 ),

输出：

Answer 3

你需要使用一个Expanded小部件

    Expanded(
      child: FlatButton(
        onPressed: (){},
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Icon(Icons.description),
            ),
            Text("Detalles"),
          ],
        ),
      ),
    ),