Flutter Flat Button 在其可见边框之外是可点击的答案

【问题标题】：Flutter Flat Button is clickable outside its visible borderFlutter Flat Button 在其可见边框之外是可点击的
【发布时间】：2020-07-21 12:41:32
【问题描述】：

问题：我希望用户在其可见边框之外点击时无法点击按钮。

我创建了两个FlatButton，其中没有任何填充，问题是我的按钮仍然可以点击，即使我在两者之间点击。

请解释一下为什么会这样？

这是我的登录屏幕的代码，以备不时之需：

class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _googleSignIn = CustomFlatButton(text: 'Sign in with Google',);
    final _facebookSignIn = CustomFlatButton(text: 'Sign in with Facebook', color: Colors.blue[900], textColor: Colors.white, onTapColor: Colors.white30,);
    return Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('Time Tracker'),
          centerTitle: true,
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 20),
          color: Colors.grey[200],
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Sign In',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: 30,
                ),
              ),
              _googleSignIn,
              _facebookSignIn,
            ],
          ),
        ));
  }
}

这是我的自定义 FlatButton 的代码：

class CustomFlatButton extends StatelessWidget {
  final String text;
  final Color color;
  final Color textColor;
  final Color onTapColor;
  CustomFlatButton(
      {this.text = 'Default sign in text', color, textColor, onTapColor})
      : textColor = textColor ?? Colors.grey[900],
        color = color ?? Colors.white70,
        onTapColor = onTapColor ?? ThemeData.light().splashColor;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      splashColor: onTapColor,
      onPressed: () {},
      child: Text(
        text,
        style: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w400,
          color: textColor,
        ),
      ),
      color: color, //Colors.white70
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(7)),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart clickable flatbutton

【解决方案1】：

你需要做两件事

阅读并添加 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap 到 FlatButton
在按钮之间添加填充（例如，添加SizedBox(height:10)）

【讨论】：