Flutter: How to make a button expand to the size of its parent?
FlutterFlutter LayoutFlutter Problem Overview
I am trying to create square buttons, but Expanded doesn't seem to work the same as it does with containers. Take the following code for example
new Expanded(
flex: 2,
child: new Column(
children: <Widget>[
new Expanded(
child:new Row(
children: <Widget>[
new Expanded(child: new MaterialButton(...)),
new Expanded(child: new MaterialButton(....)),
new Expanded(child: new Container(color: Colors.red)),
new Expanded(child: new Container(color: Colors.green)),
]
)
)
],
)
)
....
It displays two buttons that are expanded horizontally, but not vertically. At the same time the containers will expand both horizontally and vertically. The same effect occurs if I do the following:
new Expanded(
flex: 2,
child: new Column(
children: <Widget>[
new Expanded(
child:new Column(
children: <Widget>[
new Expanded(child: new MaterialButton(...)),
new Expanded(child: new MaterialButton(....)),
new Expanded(child: new Container(color: Colors.red)),
new Expanded(child: new Container(color: Colors.green)),
]
)
)
],
)
)
....
Where I've changed the Row to Column. The buttons will expand vertically, but not horizontally, while the containers will do both.
Is there a way have my buttons expand to fit their parent both vertically and horizontally?
Flutter Solutions
Solution 1 - Flutter
Add the crossAxisAlignment property to your Row;
crossAxisAlignment: CrossAxisAlignment.stretch
Solution 2 - Flutter
Wrapping with a ButtonTheme with minWidth: double.infinity allows to provide constraints
ButtonTheme(
minWidth: double.infinity,
child: MaterialButton(
onPressed: () {},
child: Text('Raised Button'),
),
),
or after https://github.com/flutter/flutter/pull/19416 landed
MaterialButton(
onPressed: () {},
child: SizedBox.expand(
width: double.infinity,
child: Text('Raised Button'),
),
),
Solution 3 - Flutter
We can add Button insider Container.
Solution:
Container(
width: double.infinity,
child: RaisedButton(
onPressed: null,
child: Text('NEXT'),
),
)
Solution 4 - Flutter
You can also try it
-
Using
SizedBoxSizedBox( width: double.maxFinite, // set width to maxFinite child: RaisedButton(...), ) -
Use
MaterialButton'sminWidthproperty.MaterialButton( minWidth: double.maxFinite, // set minWidth to maxFinite color: Colors.blue, onPressed: () {}, child: Text("Button"), )
Solution 5 - Flutter
In Flutter 2.+ consider this solution:
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, double.infinity), // <--- this line helped me
),
onPressed: () {},
child: Icon(
Icons.keyboard_return
),
)
Solution 6 - Flutter
you can insert under child:column
crossAxisAlignment: CrossAxisAlignment.stretch
My code
My result
Solution 7 - Flutter
MaterialButton(
minWidth: MediaQuery.of(context).size.width, // set minWidth to width of the device screen
onPressed: () {},
child: Text("Button"),
)
for reference https://api.flutter.dev/flutter/widgets/MediaQuery-class.html
Solution 8 - Flutter
VisualDensity is the thing you are looking for. Add it to the ButtonStyle object.
ElevatedButton(
style: const ButtonStyle(
visualDensity: VisualDensity(
horizontal: VisualDensity.maximumDensity,
vertical: VisualDensity.maximumDensity,
),
),
...
),
Solution 9 - Flutter
Just put the ElevatedButton inside a SizedBox and set only the height and not the width.
SizedBox(
height: 50,
child: ElevatedButton(
onPressed: () {},
child: Widget(),
),
),