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

Question

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

我创建了两个 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)),
      ),
    );
  }
}

Answer 1

你需要做两件事

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

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

Flutter Flat Button is clickable outside its visible border

clickable

dart

flutter

flatbutton