CODEWITHSUNDEEP
flutterflutter-layout
fuzzylogical
fuzzylogical

Reputation: 892

Flutter: How to make a button expand to the size of its parent?

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?

Upvotes: 70

Views: 89991

Answers (10)

Kyros
Kyros

Reputation: 104

I have been able to achieve this using Flexible widget.

Wrap your button in a Flexiable widget and set the fit to Flexfit.tight.

Upvotes: 0

zex_rectooor
zex_rectooor

Reputation: 992

From documentation and using button theme with styleFrom utility static method you can code like this:

/// To specify buttons with a fixed width and the default height use
/// `fixedSize: Size.fromWidth(320)`. Similarly, to specify a fixed
/// height and the default width use `fixedSize: Size.fromHeight(100)`.
ElevatedButton(
          onPressed: () {},
          child: Text('text'),
          style: ElevatedButton.styleFrom(
      fixedSize: const Size.fromWidth(double.infinity),
    ),
  )

Upvotes: -1

Suhel Chakraborty
Suhel Chakraborty

Reputation: 499

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,
    ),
  ),
  ...
),

Upvotes: -1

Pratham Mahajan
Pratham Mahajan

Reputation: 1

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

Upvotes: 0

Rodion Mostovoi
Rodion Mostovoi

Reputation: 1563

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

Upvotes: 14

thaihoang305
thaihoang305

Reputation: 59

you can insert under child:column

crossAxisAlignment: CrossAxisAlignment.stretch

My code

My result

Upvotes: 5

Jitesh Mohite
Jitesh Mohite

Reputation: 34210

We can add Button insider Container.

Solution:

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

Upvotes: 6

CopsOnRoad
CopsOnRoad

Reputation: 267574

You can also try it

  1. Using SizedBox

    SizedBox(
  width: double.maxFinite, // set width to maxFinite
  child: RaisedButton(...),
)

  2. Use MaterialButton's minWidth property. 

    MaterialButton(
  minWidth: double.maxFinite, // set minWidth to maxFinite
  color: Colors.blue,
  onPressed: () {},
  child: Text("Button"),
)

Upvotes: 7

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657318

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'),
    ),
  ),

Upvotes: 30

Shady Aziza
Shady Aziza

Reputation: 53317

Add the crossAxisAlignment property to your Row;

crossAxisAlignment: CrossAxisAlignment.stretch

Upvotes: 112

Related Questions