Flutter Flat Button is clickable outside its visible border

Question

Problem: I would like the user to not be able to tap a button if they click outside of its visible border.

I created two FlatButton with no padding whatsoever inside them, the problem is that my button is still clickable even if I tap between the two.

Please explain to me why this is happening?

Here is the code of my Sign in Screen in case you need it:

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,
            ],
          ),
        ));
  }
}

And here is the code for my custom 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

You need to do 2 things

1. Read about and add materialTapTargetSize: MaterialTapTargetSize.shrinkWrap to FlatButton
2. Add padding between buttons (for example, add SizedBox(height:10) )