Flutter添加没有边距的按钮

Question

我将尝试实现一个没有边距的按钮。

我的代码如下：

：

  @override
  Widget build(BuildContext context) {
    return new AppState(
      child: new Scaffold(

          appBar: AppBar(
            backgroundColor: Color(0xFF031e39),
            title: Text("MY APP"),
          ),
          body:

          ButtonTheme(
            buttonColor: Color(0xFF031e39),
            minWidth: double.infinity,
            child: FlatButton(
              color: Color(0xFF81A483),
              onPressed: () {
                launchSearch();
              },
              child: Text('Search',style: TextStyle(color: Colors.white),),
            ),
          )
      ),
    );
  }

结果是：

我尝试了不同的方法，但无法解决按钮没有边距的问题。

如果我在列中放置一个小部件覆盖我的按钮，结果也是相同的。

如何使FlatButton没有任何边距？

- gpasse

---

可能是在列中的RaisedButton小部件之间出现不需要的空格的重复问题。 - diegoveloper

Answer 1

根据源代码，Flutter 会在按钮小于目标点击大小（48 x 48）时填充它们，您可以通过以下方法避免：

1. 将按钮高度设置为大于或等于 48。

或者

2. 将 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap 添加到您的 FlatButton。

- Jordan Davies

---

它为我节省了数小时的时间。 - David

它仍然留下了微小的填充。 另一种解决方法是使用带有TapGestureRecognizer()的RichText而不是FlatButton。 点击可能不太方便，但这可能是符合您设计的唯一方法。 - Sergey Molchanovsky

现在FlatButton已经被弃用，为了避免神秘的边距，请在ButtonStyle中为您的TextButton添加tapTargetSize: MaterialTapTargetSize.shrinkWrap。<gripe>我不希望从Flutter这样一个很棒的平台中看到这种隐藏的无意义内容</gripe> - Roger

Answer 2

我明白了，需要做一些修改。 我使用了Container和FloatingActionButton代替了ButtonTheme和FlatButton。 使用Container可以设置屏幕上的大小。使用FloatingActionButton可以在Scaffold中设置按钮的位置，在这种情况下是整个屏幕。 为了使按钮变平，我将属性elevation设置为0.0，这样按钮看起来就像是平的。

appBar: AppBar(
      backgroundColor: Color(0xFF031e39),
      title: Text("MY APP"),
    ),
    body: new Container(
      width: double.infinity,
      child: FloatingActionButton(
        backgroundColor: Color(0xFF81A483),
        shape: new RoundedRectangleBorder(),
        elevation: 0.0,
        onPressed: () {
          print("entra");
        },
        child: Text(
          'Search',
          style: TextStyle(color: Colors.white),
        ),
      ),
    )

我希望这对您有所帮助。

- Nadia Ghebreial

Answer 3

使用：materialTapTargetSize: MaterialTapTargetSize.shrinkWrap

将 materialTapTargetSize 属性设置为 MaterialTapTargetSize.shrinkWrap 可以使 Tap 目标尺寸自适应其内容大小。

FlatButton(
    textColor: GFColors.WHITE,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        child: Text(
            "BLOG",
            style: TextStyle( 
            fontSize: 12.0, 
            fontWeight: FontWeight.normal 
        ),
    ),
    onPressed: () {
    },
),

- ztvmark