US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No 405, Kabir Shilp, Opp. Kansar Hotel, Opp. Landmark, Kudasan, Gandhinagar, Gujarat 382421

[email protected]

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

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 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

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.

Post a Comment