Can't change the height of a button in flutter

3,406

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.

Share:
3,406
Johanna
Author by

Johanna

Updated on December 02, 2022

Comments

  • Johanna
    Johanna over 1 year

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