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