Search code examples
flutterflutter-layout

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

Solution

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