Can't change the height of a button in flutter

Question

I'm new to flutter. I'm trying to insert to the "AppBar" a simple "contained button" with text on it. (For example the material design "contained button" here)

The problem is that no matter what height I insert in the Constructor, the button still fills the full height of the AppBar.

I can visibly solve the problem with setting padding as I did in the example below, but it frustrates me that I don't understand why I can't change the button's height itself. I tried also to wrap it with a container or a sizedBox like shown in the answers here but it didn't make any visible change (still the button filled the whole appBar height)

I would really appreciate it if also someone could explain to me why the code acts like that.

      appBar: AppBar(
      automaticallyImplyLeading: false,
      title: Text(widget.title),
      actions: <Widget>[
        Padding(
            padding: EdgeInsets.only(top: 7.0, bottom: 7),
            child: Container(
              width: 80,
              child: FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  color: Color.fromRGBO(58, 90, 128, 1),
                  onPressed: () {},
                  child: Text('Button')
              ),
            )
        ),
        ]
  )

score 2 · Answer 1 · answered Apr 12 '20 at 21:10

I think AppBar() is following the material design guidelines for AppBar.

Also this is related with the Material Scaffold() widget.

You can take a look at this documentation

In this particular case, I think the best way to control the height is using a Padding() around. You can erase the Container in your code.

appBar: AppBar(
    automaticallyImplyLeading: false,
    title: Text(widget.title),
    actions: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlatButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
            color: Color.fromRGBO(58, 90, 128, 1),
            onPressed: () {},
            child: Text('Button')),
      ),
    ]),

You can control the full AppBar size using PreferredSize(), but this has no relation with the buttons height.

Can't change the height of a button in flutter

1 Answers1