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')
),
)
),
]
)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With