CODEWITHSUNDEEP
flutterflutter-layout
OlivierGrenoble
OlivierGrenoble

Reputation: 4143

How to set the width and height of a button in Flutter?

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

Upvotes: 272

Views: 560839

Answers (30)

RuslanBek
RuslanBek

Reputation: 2009

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: const Size(100, 40), //////// HERE
            ),
            onPressed: () {},
            child: const 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.

Upvotes: 79

Miro Grujin
Miro Grujin

Reputation: 716

Use fixedSize for the ElevatedButton and set MediaQuery.of(context).size.width for the full width.

ElevatedButton(
      onPressed: onClick,
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor,
        fixedSize: Size(MediaQuery.of(context).size.width, 50),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(100),
          side: BorderSide(color: borderColor ?? Colors.transparent),
        ),
      ),
    ),

Upvotes: 1

Mohammad Bilal Akbar
Mohammad Bilal Akbar

Reputation: 169

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

Upvotes: 1

Luke Hutchison
Luke Hutchison

Reputation: 9230

If you want the button to be as narrow as possible, perfectly wrapping its content, i.e. if you want the button to take as much size (width) as its content (rather than the whole row), then wrap the button in a Row (possibly with mainAxisAlignment: MainAxisAlignment.center).

Upvotes: 1

Yuriy N.
Yuriy N.

Reputation: 6137

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

Upvotes: 1

J. Lamandé
J. Lamandé

Reputation: 27

Approved answer is now deprecated, see docs.

To update code size from theme to all buttons you can do this :

ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        fixedSize:MaterialStateProperty.all<Size?>(Size(200.0, 75.0)),
        textStyle:MaterialStateProperty.all<TextStyle?>(TextStyle(fontSize:30))),
    ),
  )

Upvotes: 0

Ali Akbar Afridi
Ali Akbar Afridi

Reputation: 890

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

Upvotes: 11

Mr. Poopybutthole
Mr. Poopybutthole

Reputation: 374

wrap your ElevatedButton with a Column PLUS add padding for the button for the style:

                          Column(
                            children: [
                              ElevatedButton(
                                  style: TextButton.styleFrom(
                                    backgroundColor: Colors.green,
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 20 * 1.5, vertical: 20),
                                  ),
                                  onPressed: () {},
                                  child: const Text('text')),],),

Upvotes: 0

Usman Ali
Usman Ali

Reputation: 1

To set the height and width of Any Button Just Wrap it with SizedBox. you set easily the height and width of any button by Wrape with SizedBox . And if you want to give Space between Two Any Kind of Widgets then you can Used SizedBox and inside the SizedBox you use height .As much as you want to give..

Upvotes: -1

Sammrafi
Sammrafi

Reputation: 537

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

Upvotes: 1

Lojith Vinsuka
Lojith Vinsuka

Reputation: 1049

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

Upvotes: 1

Dimal Govinnage
Dimal Govinnage

Reputation: 143

Use SizeBox with width and height parameters

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

Upvotes: 0

Zalek Bloom
Zalek Bloom

Reputation: 551

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.

Upvotes: 0

Shahadat Hossain Shaki
Shahadat Hossain Shaki

Reputation: 806

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

        ),

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 268414

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

Upvotes: 252

Jitesh Mohite
Jitesh Mohite

Reputation: 34270

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.

Upvotes: 8

kevinbrink
kevinbrink

Reputation: 1309

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

Upvotes: 23

inaps
inaps

Reputation: 1664

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    child: Text("FULL WIDTH"),
    onPressed: () {},
  ),
),

Use ElevatedButton since RaisedButton is deprecated

Upvotes: 1

ForestG
ForestG

Reputation: 18123

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: () {},
            ),
          ),
        ));
  }

Upvotes: 8

Jairo Rodriguez
Jairo Rodriguez

Reputation: 396

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

Upvotes: 1

Raj A
Raj A

Reputation: 592

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: () {},
    ),
  ),
),

Upvotes: 2

Irfandi D. Vendy
Irfandi D. Vendy

Reputation: 1004

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

Upvotes: 0

Mimu Saha Tishan
Mimu Saha Tishan

Reputation: 2633

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

Upvotes: 5

lbrandao
lbrandao

Reputation: 4373

Short and sweet solution for a full-width button:

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)

Upvotes: -3

謝Richard
謝Richard

Reputation: 11

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

Upvotes: 0

Artem
Artem

Reputation: 145

Try it out

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

Upvotes: -2

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277667

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.

Upvotes: 26

Amir Vazirifar
Amir Vazirifar

Reputation: 151

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

Upvotes: 0

Shikhar Singh
Shikhar Singh

Reputation: 112

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

Upvotes: 3

user13108629
user13108629

Reputation:

Wrap RaisedButton inside Container and give width to Container Widget.

e.g

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

Upvotes: 3

Related Questions