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?
将crossAxisAlignment
属性添加到您的Row
;
crossAxisAlignment: CrossAxisAlignment.stretch
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'),
),
),
We can add Button insider Container.
Solution:
Container(
width: double.infinity,
child: RaisedButton(
onPressed: null,
child: Text('NEXT'),
),
)
You can also try it
Using SizedBox
SizedBox( width: double.maxFinite, // set width to maxFinite child: RaisedButton(...), )
Use MaterialButton
's minWidth
property.
MaterialButton( minWidth: double.maxFinite, // set minWidth to maxFinite color: Colors.blue, onPressed: () {}, child: Text("Button"), )
you can insert under child:column
crossAxisAlignment: CrossAxisAlignment.stretch
My code
My result
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
),
)
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
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,
),
),
...
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.