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？

Answer 1

根据source。看起来Flutter会垫出小于目标点击大小（48 x 48）的按钮，您可以通过以下方法解决它：

使按钮高度大于或等于48

或

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

Answer 2

我明白了，但是做了一些修改。我没有使用ButtonTheme和FlatButton，而是使用了Container和FloatingActionButton

使用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),
        ),
      ),
    )

我希望这对您有帮助

Answer 3

使用： materialTapTargetSize：MaterialTapTargetSize.shrinkWrap，

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

颤振添加按钮，没有边距

3 个答案: