Question

我一直在颤抖地编码这个按钮栏，它总是在两个按钮之间保持多余的空间。尝试填充，TapTargetSize，但无济于事。有什么想法吗？

这是我的代码

 Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    FlatButton(
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      onPressed: () {/*Do Something*/},
                      color: Colors.grey.withOpacity(0.2),
                      child: new Icon(
                        Icons.file_upload,
                        color: Colors.black,
                        size: 15.0,
                      ),
                      shape: new CircleBorder(),
                      padding: EdgeInsets.all(0.0),
                    ),
                    FlatButton();
                    FlatButton();
                    FlatButton();

                  ],
                )

这就是它的样子。

**由于该问题大部分是代码，因此必须删除其他3个按钮的代码。其他3个按钮类似于第一个按钮

Answer 1

您使用的FlatButton的最小大小为88.0 x 36.0，如文档中所述。

您的选择是：

使用ButtonTheme覆盖此
改为使用IconButton，因为这似乎仍然是您使用按钮的方式
将每个按钮包装在SizedBox中，如下所示：

SizedBox(
 width: 40,
 child: FlatButton(),
)

Answer 2

在展开的小部件中包裹您的按钮：

Expanded(
  child: FlatButton(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    onPressed: () {/*Do Something*/},
    color: Colors.grey.withOpacity(0.2),
    child: new Icon(
      Icons.file_upload,
      color: Colors.black,
      size: 15.0,
    ),
    shape: new CircleBorder(),
    padding: EdgeInsets.all(0.0),
  ),
),

如何在Flutter按钮栏中删除多余的空格？

2 个答案: