Flutter 拉伸并开始FlatButton.icon

在

列中

有一组使用

FlatButton.icon（）创建的
FlatButton
s
使图像和文本并排放置，
我需要将
扁平按钮的内容向左对齐，但按钮是水平拉伸的

将列的
crossAxisAlignment
设置为
crossAxisAlignment.stretch
根据需要拉伸按钮的宽度，但将按钮内容居中：


并将其设置为
CrossAxisAlignment.start
会将按钮的内容向左对齐，但按钮的宽度会缩小：


是否可以将按钮内容向左对齐，但按钮可以拉伸？或者我必须使用其他小部件组合（
InkWell
例如？）
这有点像黑客，但您可以使用常规的FlatButton小部件并执行类似操作：

class SampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: 200,
          ),
          child: FlatButton(
            onPressed: () {},
            child: Row(
              children: <Widget>[
                Icon(Icons.home),
                Text('Recharge and balance'),
                Spacer(),
              ],
            ),
          ),
        ),
      ],
    );
  }
}


class SampleWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
返回列(
crossAxisAlignment:crossAxisAlignment.stretch，
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
约束盒(
约束：BoxConstraints(
最大宽度：200，
),
孩子：扁平按钮(
按下：（）{}，
孩子：排(
儿童：[
图标（Icons.home），
文本（“充电和平衡”），
垫片（），
],
),
),
),
],
);
}
}

间隔小部件将占用行的剩余空间。从这里开始，您只需将图标的填充调整为与FlatButton相同。图标
您可以使用具有child属性的普通
FlatButton（）
构造函数，然后您可以将一行作为子行，并使其成为
mainAxisAlignment:mainAxisAlignment。启动
并使文本和图标成为子对象，如下图所示：

Scaffold(
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              FlatButton(
                color: Colors.grey,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Icon(Icons.check),
                    SizedBox(width: 10),
                    Text('Recharge and balance')
                  ],
                ), onPressed: () {},
              )
            ],
          ),
        )

脚手架(
正文：专栏(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
扁平按钮(
颜色：颜色。灰色，
孩子：排(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
图标（图标。检查），
尺寸箱（宽度：10），
文本（“充电和平衡”）
],
)，onPressed:（）{}，
)
],
),
)

结果是：

尝试将
Flatbutton
的padding属性更改为
Edgeinsets。仅限（左：0.0）

看看@hiwajalal我已经试过对齐了，但没有成功，我认为这不仅仅是一个对齐问题，更重要的是如何呈现
FlatButton
。您的按钮似乎在全屏显示，所以为什么不使用
CrossAxisAlignment。开始
，通过将
double.infinity
指定给按钮的宽度，将按钮的宽度设置为无穷大。如果您的意思是用
SizedBox
（原因
FlatButton
没有
width
属性），它也不起作用=>具有与交叉轴对齐相同的效果。stretch
请检查我下面的答案。错误：RenderBox未布局：RenderBox Interlistener#27293 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE“package:flatter/src/rendering/box.dart”：失败的断言：第1687行位置12：“hasSize”相关er导致ror的小部件是\u FlatButtonWithIcon
padding: Edgeinsets.only(left: 0.0),