How to Make Button Expand to the Size of it’s Parent ?
FlatButton Widget is a simple button that has no much-highlighted decoration and mostly used on toolbar and dialog etc. Depending on the user requirement user may need to display a widget according to the full width of the screen so we need to expand it. So in this article, We will learn about How to Make a Button Expand to the Size of its Parent?
How to Make Button Expand to the Size of its Parent?
Add the crossAxisAlignment property to your Row Widget;
crossAxisAlignment: CrossAxisAlignment.stretch
We can Wrap with a ButtonTheme with minWidth: double. infinity allows for providing constraints.
ButtonTheme( minWidth: double.infinity, child: MaterialButton( onPressed: () {}, child: Text('Raised Button'), ), ),
We can also wrap a ElevatedButton with a Container with an infinity width like the one below.
Container( width: double.infinity, child: ElevatedButton( onPressed: null, child: Text('NEXT'), ), )
You can also give it a try like the below:
Using SizedBox Widget
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"), )
We will get output like a below:
Expand Button Flutter
Conclusion:
In this article, we have been through How to Make Button Expand to the Size of its Parent?
Thanks for Reading !!! Keep Learning !!!
Do let us know if you need any assistance with Flutter Development?
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.