Can't change the height of a button in flutter
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.
Johanna
Updated on December 02, 2022Comments
-
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') ), ) ), ] )