How to set the width of a RaisedButton in Flutter?

Question

I have seen that I can\'t set the width of a RaisedButton in Flutter. If I have well understood, I should put the RaisedButton into a SizedBox

Answer 1

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

Answer 2

Short and sweet solution for a full-width button:

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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 similar solution to SizeBox also.