Flutter add button without margin

Question

I am trying to implement a button without margin.

My code is :

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

The result is :

I have tried all different ways but I cannot figure out a solution so the button has not margin.

If I put a widget on top of my button in a column I get the same results:

How can I have a FlatButton without any margin ?

Answer 1

According to the source. It looks like Flutter pads out buttons that are smaller than the target tap size (48 x 48), you can get around it by:

1. Make your button height larger than or equal to 48

or

2. Add materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, to your FlatButton.

Answer 2

I got it but making some modifications. Instead of using a ButtonTheme and a FlatButton I used a Container and a FloatingActionButton

With Container you can set the size in the screen. With FloatingActionButton you can set the position of the button in the Scaffold, which in this case is in all the screen. To make the button flat I putted the attribute elevation to 0.0, so the button looks like flat.

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

I hope this is helpful for you

Answer 3

use: materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

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