251

I have seen that I can't set the width of a ElevatedButton in Flutter. If I have well understood, I should put the ElevatedButton into a SizedBox. I will then be able to set the width or height of the box. Is it correct? Is there another way to do it?

This is a bit tedious to create a SizedBox around every buttons so I'm wondering why they have chosen to do it this way. I'm pretty sure that they have a good reason to do so but I don't see it. The scaffolding is pretty difficult to read and to build for a beginner.

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: ElevatedButton(
    child: Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),
5
  • 2
    Read this issue: github.com/flutter/flutter/issues/10492
    – Blasanka
    May 11, 2018 at 13:57
  • 4
    Please note that a UI design with fixed widths may give you headaches if you'd ever decide to make your app accessible (offer larger font sizes) or multilingual (some languages are more verbose than others). May 11, 2018 at 14:42
  • In a flexible, the raisebutton does not stop at the minWidth. I tried SizedBox but it didn't work keep a minimum width for the raisedbutton May 17, 2021 at 20:35
  • For those trying to solve the multilingual issue, I ended up using a ConstrainedBox around the button with constraints set to BoxConstraints.tightFor(height: 50). This sets a height but allows the button to expand horizontally for different text lengths.
    – whla
    Nov 22, 2021 at 2:34
  • Somehow still rocket science to me 4 years later Mar 29 at 8:43

36 Answers 36

301

As said in documentation here

Raised buttons have a minimum size of 88.0 by 36.0 which can be overidden with ButtonTheme.

You can do it like that

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);
6
  • 14
    Is there anything like "match_parent" ??
    – Pawan
    Nov 12, 2018 at 14:41
  • 4
    you could use width:MediaQuery.of(context).size.width or width:double.infinity
    – Oush
    Oct 25, 2019 at 12:37
  • 5
    Just wrap it in an Expanded widget
    – anon
    May 21, 2020 at 22:09
  • 2
    it removes all base buttontheme values Jun 9, 2020 at 20:52
  • 4
    For Flutter 2 buttons (Text, Elevated, Outlined etc. see my answer below, as this answer no longer seems to work on them.
    – ForestG
    Mar 19, 2021 at 9:43
236

match_parent (Full width):

SizedBox(
  width: double.infinity, // <-- match_parent
  height: double.infinity, // <-- match-parent
  child: ElevatedButton(...)
)

or

SizedBox.expand(
  child: ElevatedButton(...)
) 

Specific width:

SizedBox(
  width: 100, // <-- Your width
  height: 50, // <-- Your height
  child: ElevatedButton(...)
)
6
  • Interesting solution. I guess that we should then use a margin to let some empty space on the sides. Jan 17, 2019 at 8:44
  • In that case you should use Container instead of SizedBox
    – CopsOnRoad
    Mar 15, 2019 at 10:21
  • 1
    @CopsOnRoad SizedBox creates a fixed size box. Unlike the Container widget, Sized Box does not have color or decoration parameters. So, if you only need to set the width, in that case, SizedBox is more clearer. You can also check this answer to find more stackoverflow.com/questions/55716322 Jan 11, 2021 at 18:46
  • 1
    @HasanEl-Hefnawy I am aware of it which is why I used sized box. But someone was asking for margin and I replied him with Container solution
    – CopsOnRoad
    Jan 11, 2021 at 18:49
  • @CopsOnRoad, you're right, I was wrong. To be clear, this works in a column: it enlarge the button to take all the width of the column. I cannot modify my original comment so I deleted it to avoid misleading.
    – John Wang
    Jun 13, 2021 at 10:44
67

With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton.

With that in mind, much more cleaner approach to give custom size to ElevatedButton is minimumSize property of ElevatedButton widget.

Output

enter image description here

Full Code

          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
              onPrimary: Colors.white,
              shadowColor: Colors.greenAccent,
              elevation: 3,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(32.0)),
              minimumSize: Size(100, 40), //////// HERE
            ),
            onPressed: () {},
            child: Text('Hey bro'),
          )

Note: Also keep in mind that same approach can be used in new widgets like TextButton and OutlinedButton using TextButton.styleFrom(minimumSize: Size(100, 40)) and OutlinedButton.styleFrom(minimumSize: Size(100, 40)) respectively.

4
  • 4
    minimumSize does not work, i tried it on flutter 3.0.1. Jun 8, 2022 at 13:34
  • what if I do not want to change the height? Jun 9, 2022 at 13:04
  • 1
    @MarwinLebensky Hey, Sorry for the late reply. It is working perfectly. Tested on 3.0.2
    – RuslanBek
    Aug 19, 2022 at 10:47
  • @RobinDijkhof Hey. Sorry for the late reply. If you don't add minimumSize property, it takes up parent widget's size.
    – RuslanBek
    Aug 19, 2022 at 10:49
23

That's because flutter is not about size. It's about constraints.

Usually we have 2 use cases :

  • The child of a widget defines a constraint. The parent size itself is based on that information. ex: Padding, which takes the child constraint and increases it.
  • The parent enforce a constraint to its child. ex: SizedBox, but also Column in strech mode, ...

RaisedButton is the first case. Which means it's the button which defines its own height/width. And, according to material rules, the raised button size is fixed.

You don't want that behavior, therefore you can use a widget of the second type to override the button constraints.


Anyway, if you need this a lot, consider either creating a new widget which does the job for you. Or use MaterialButton, which possesses a height property.

1
  • Where can I read all the material rules to see when case 1 applies and when case 2 applies? Sep 16, 2021 at 20:55
21

I would recommend using a MaterialButton, than you can do it like this:

MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)
2
  • using minWidth does not fully answer the question of setting the width. Using a Wrap parent widget could be helpful here.
    – AlanKley
    May 29, 2019 at 15:55
  • That's perfect to obtain smaller buttons which wrap their labels tightly.
    – hawkbee
    Mar 19, 2020 at 18:51
10

You need to use an Expanded Widget. But, if your button is on a column, the Expanded Widget fills the rest of the column. So, you need to enclose the Expanded Widget within a row.

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])
2
  • "the Expanded You" - you mean the expanded widget?
    – Yasir
    Jan 30, 2019 at 0:10
  • 1
    flex default value is 1, there is no need to specify it.
    – c49
    Aug 8, 2020 at 10:29
8

The new buttons TextButton, ElevatedButton, OutlinedButton etc. are to be changed in a different way.

One method I found is from this article: you need to "tighten" a constrained box around the button.

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Center(
          child: ConstrainedBox(
            constraints: BoxConstraints.tightFor(width: 300, height: 200),
            child: ElevatedButton(
              child: Text('300 x 200'),
              onPressed: () {},
            ),
          ),
        ));
  }
3
  • "The new buttons TextButton, ElevatedButton, OutlinedButton etc. are to be changed in a different way." -- On what basis are you saying this because you don't need a ConstrainedBox since a Container(width, height) is definitely working with new buttons
    – iDecode
    May 17, 2021 at 8:28
  • I was referring to the accepted answer: the solution (minWidth: 200.0, height: 100.0, ) is not working with the new button types. Your solution probably works too.
    – ForestG
    May 17, 2021 at 8:36
  • why not? That answer is outdated, and I provide a different approach for an updated flutter version. I even commented under that answer to indicate the new tools and provided a suitable solution.
    – ForestG
    May 17, 2021 at 9:29
8

Use Media Query to use width wisely for your solution which will run the same for small and large screen

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

You can apply a similar solution to SizeBox also.

1
  • If the answer is "MediaQuery", you asked the wrong question. You nearly always want LayoutBuilder to get your space available, not MediaQuery. Sep 20, 2021 at 22:39
7

We can also use ElevatedButton Widget, it have fixedSize property. latest Flutter version

 ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom( 
              fixedSize: Size(120, 34), // specify width, height
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(
                20,
              ))),
          child: Text("Search"),
        )

Preview

Preview

6

My preferred way to make Raise button with match parent is that wrap it with Container. below is sample code.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )
5

This piece of code will help you better solve your problem, as we cannot specify width directly to the RaisedButton, we can specify the width to it's child

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );
1
  • also, if you want your button to be 80% of the screen fo example, you can width * 0.8 May 9, 2020 at 10:12
5

Simply use FractionallySizedBox, where widthFactor & heightFactor define the percentage of app/parent size.

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),
0
4

You can create global method like for button being used all over the app. It will resize according to the text length inside container. FittedBox widget is used to make widget fit according to the child inside it.

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

If you want button of specific width and height you can use constraint property of RawMaterialButton for giving min max width and height of button

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),
3

If you want globally change the height and the minWidth of all your RaisedButtons, then you can override ThemeData inside your MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }
0
3

Wrap RaisedButton inside Container and give width to Container Widget.

e.g

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )
0
2

This worked for me. The Container provides the height and FractionallySizedBox provides the width for the RaisedButton.

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),
1
  • 10+ likes, Because no solution works for me, for width a button in listView, But yours. Thanks. Nov 4, 2022 at 14:25
2

Try with Container, I think we will have more control.

ElevatedButton(
          style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
          onPressed: () {
            buttonClick();
          },
          child:  Container(
            height: 70,
            width: 200,
            alignment: Alignment.center,
            child: Text("This is test button"),
          ),

        ),
1

you can do as they say in the comments or you can save the effort and work with RawMaterialButton . which have everything and you can change the border to be circular and alot of other attributes. ex shape(increase the radius to have more circular shape)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

and you can use whatever shape you want as a button by using GestureDetector which is a widget and accepts another widget under child attribute. like in the other example here

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)
1

If the button is placed in a Flex widget (including Row & Column), you can wrap it using an Expanded Widget to fill the available space.

2
  • 2
    Expanded can only work if your parents support you to have it.
    – CopsOnRoad
    Nov 25, 2018 at 13:44
  • Expanded is supposed to be used in multi-child widgets like Row and Column.
    – Loolooii
    Feb 10, 2020 at 13:34
1

we use Row or Column, Expanded, Container and the element to use example RaisedButton

 body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2, // we define the width of the button
                      child: Container(
                        // height: 50, we define the height of the button
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          child: RaisedButton(
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            textColor: Colors.white,
                            color: Colors.blue,
                            onPressed: () {
                              // Method to execute
                            },
                            child: Text('Copy'),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2, // we define the width of the button
                      child: Container(
                        // height: 50, we define the height of the button
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          child: RaisedButton(
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            textColor: Colors.white,
                            color: Colors.green,
                            onPressed: () {
                              // Method to execute
                            },
                            child: Text('Paste'),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
1
SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    child: Text("FULL WIDTH"),
    onPressed: () {},
  ),
),

Use ElevatedButton since RaisedButton is deprecated

1

You don't need to use other widget to set the size. You can use minimumSize for ElevatedButton

ElevatedButton(
              style: ElevatedButton.styleFrom(
                      minimumSize: const Size(200, 50),
                      elevation: 0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50), // <-- Radius
                      ),
                    ),
                    onPressed: (){},
                    child: const Text("Text", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
                  ),
1

Old question. A lot of answers. I went thru all of them and looked for the answer that provides code for a reusable button that accepts width and height as parameters. As OP specifically noted that it is tedious to wrap every button in a SizedBox.

Not found. So, here is one more answer. Below is a code for the reusable button component with a default size, which also accepts width and height.

class MenuButton extends StatelessWidget {
  final String text;
  final void Function()? onPressed;
  final double width;
  final double height;
  const MenuButton({required this.text, this.onPressed, this.width = 
    200, this.height = 60, super.key}) ;
  @override
  Widget build(BuildContext context) { 
    return SizedBox(
      width: width,
      height: height,
      child: OutlinedButton(
        onPressed: onPressed,
        child: Text(text),
      ),
    );
  }
}

And use it like this:

body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const SizedBox(height: 80),
        MenuButton(
            text: 'ПОВТОРИТЬ УРОКИ',
            onPressed: () => context.go("/repeat_lessons")),
        const SizedBox(height: 40),
        MenuButton(
            text: 'СЛЕДУЮЩИЙ УРОК 1',
            onPressed: () => context.pushNamed("lesson", params: {'number': "1"})),
        const SizedBox(height: 40),
        MenuButton(
            text: 'СПИСОК УРОКОВ',
            onPressed: () => context.go("/lesson_list")),

        const SizedBox(height: 40),
        MenuButton(
            text: 'ВЫХОД',
            onPressed: () => print('exit button pressed')),          
      ],
    ),
  ),

enter image description here

1

Wrap any button with constrained box or sized box with custom height and width and remove the padding of button by setting it to zero. Now use can use it in any way with custom height and width.

ConstrainedBox(
                              constraints: BoxConstraints.tightFor(
                                  width: 70, height: 25),
                              child: ElevatedButton(
                                onPressed: () {},
                                style: Theme.of(context)
                                    .elevatedButtonTheme
                                    .style!
                                    .copyWith(
                                      padding: MaterialStatePropertyAll(
                                        EdgeInsets.all(0),
                                      ),
                                child: Text('Talk Now'),
                              ),
                            ),
0

In my case I used margin to be able to change the size:

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),
0

If you don't want to remove all the button theme set up.




ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

0

If you have a button inside a Column() and want the button to take maximum width, set:

crossAxisAlignment: CrossAxisAlignment.stretch

in your Column widget. Now everything under this Column() will have maximum available width

0

I struggled with this problem and found what my problem was: I defined all my buttons inside a ListView. Does not matter what I did, the width of the button was always the width of the screen. I replaces ListView by Column and voila - suddenly I could control the button width.

0

Use SizeBox with width and height parameters

SizedBox( width: double.infinity, height: 55.0, child: ElevatedButton( ..... ), );

0

In my case(the Button is a child of a horizontal ListView), I had to wrap the button with a padding widget and set right/left padding.

      Padding(
        padding: const EdgeInsets.only(right: 50, left: 50),
        child: ElevatedButton(onPressed: () {}, child: Text("LOGOUT")),
      )

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.