How to Make Button Expand to the Size of it’s Parent ?

· 3 min read
How to Make Button Expand to the Size of it's Parent
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 RaiseButton Widget with a Container with infinity width like the below:

Container(
            width: double.infinity,
            child: RaisedButton(
              onPressed: null,
              child: Text('NEXT'),
            ),
          )

You can also give a try like 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
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 GuideFlutter ProjectsCode 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.

Leave a Reply