How to have a Flutter button be as wide as possible up to a maximum width?

Question

In the following layout, I'd like the button to be able to grow to be as wide as possible on the screen, up to a maximum width. I've tried the following, which doesn't work (the button is always as wide as possible):

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextFormField(),
                TextFormField(),
                ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 200),
                  child: RaisedButton(child: Text("button"), onPressed: () {}),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

To expand on the layout I'm looking for: the button must be the same width as the smaller of the following two quantities: 1) the width of the screen, 2) a given fixed maximum width.

Example scenarios:

A) the screen is 1000 pixels wide, and the given fixed maximum width is 600 pixels, then the button will be 600 pixels wide.

B) the screen is 400 pixels wide, and the given fixed maximum width is 600 pixels, then the button will be 400 pixels wide.

score 3 · Answer 1 · answered Oct 22 '19 at 16:53

The solution is pretty simple, simply wrap your ConstrainedBox in Align and instead of using maxWidth use minWidth.

Align(
  child: ConstrainedBox(
    constraints: BoxConstraints(minWidth: 200),
    child: RaisedButton(child: Text("button"), onPressed: () {}),
  ),
)

Output:

If screen width > 200, button takes up 200 width
If screen width < 200, button takes up screen width

Kirill Bubochkin · Accepted Answer · 2019-10-20T13:46:24.337

1

You can remove crossAxisAlignment: CrossAxisAlignment.stretch, because TextFormField is stretching anyway. This code will make the button width to be of a max width size, but no bigger than screen width:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Center(
              child: Column(
                children: [
                  TextFormField(),
                  TextFormField(),
                  Container(
                    width: 200,
                    child: RaisedButton(
                      onPressed: () {},
                      child: Text('button'),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: RaisedButton(
                      onPressed: () {},
                      child: Text(
                        'Button with long text asf sadf sdf as df s df as '
                        'dfas dfsd f asfauhiusg isdugfisudgfi asudgk usgkdu'
                        'ksdfhk sudfhk sudhfk',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

edited Oct 20 '19 at 13:46

answered Oct 20 '19 at 13:03

Kirill Bubochkin

5,868
2
31
50

1

I don't think that works: the button doesn't expand to be as wide as possible (e.g. if `maxWidth` is set to be a large value). – Matt R Oct 20 '19 at 13:13
1

What do you mean? You can set `maxWidth` to any value (even e.g. `double.maxFinite`), and the button will stretch up to this value (or up to screen width). – Kirill Bubochkin Oct 20 '19 at 13:17
In your code, even with `double.maxFinite`, the button doesn't stretch. – Matt R Oct 20 '19 at 13:24
Can you share screenshot of how it looks like? – Kirill Bubochkin Oct 20 '19 at 13:25
It looks exactly like your screenshot. – Matt R Oct 20 '19 at 13:26
In that case I don't see what you're trying to achieve. If you set button's text to be longer, the button width will increase as well. – Kirill Bubochkin Oct 20 '19 at 13:28
What I'm trying to achieve is written in the question: "I'd like the button to be able to grow to be as wide as possible on the screen, up to a maximum width." In your code, the buttons are not growing to be as wide as possible, but only as wide as needed to fit the text. – Matt R Oct 20 '19 at 13:30
So you want the button to *always* be of predefined width, regardless of the content, right? – Kirill Bubochkin Oct 20 '19 at 13:32
No. As I keep saying, I'd like the button to be able to grow to be as wide as possible on the screen, up to a maximum width. – Matt R Oct 20 '19 at 13:33
Can you please add screenshots of what you're going to achieve? How it should look in different screens with different buttons text. Otherwise I'm not sure that I understand you correctly. – Kirill Bubochkin Oct 20 '19 at 13:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201161/discussion-between-ookami-kb-and-matt-r). – Kirill Bubochkin Oct 20 '19 at 13:38
I see your update in post, and I've updated my answer. – Kirill Bubochkin Oct 20 '19 at 13:47

jurrdb · Answer 3 · 2019-10-20T13:51:50.167

1

You can put the RaisedButton in a Row:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextFormField(),
                TextFormField(),
                ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 250),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: RaisedButton(child: Text('test')),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

The Row will create a horizontal row, and the RaisedButton widget will only take as much room as its own size.

edited Oct 20 '19 at 13:51

answered Oct 20 '19 at 13:29

jurrdb

301
3
13

That doesn't let me specify a maximum width - the button will expand to be as wide as the screen, no matter how wide the screen is. – Matt R Oct 20 '19 at 13:32
In your revised answer, the button no longer grows at all, no matter how large a value you set as `maxWidth` – Matt R Oct 20 '19 at 13:46
Try to wrap the RaisedButton in an Expanded widget. Does that give the right result? – jurrdb Oct 20 '19 at 13:50
I'm afraid not. – Matt R Oct 20 '19 at 13:51

Yusuf Amr · Answer 4 · 2021-02-20T10:33:33.443

0

first wrap with container and add width to infinity to be responsive:

Container(
  width: double.infinity,
  child: ElevatedButton(
  child: Text("button"), 
  onPressed: (){}
),
),

you can add padding too.. known that RaisedButton is deprecated and migrated to ElevatedButton..

edited Feb 20 '21 at 10:33

answered Feb 20 '21 at 10:27

Yusuf Amr

487
6
5

How to have a Flutter button be as wide as possible up to a maximum width?

4 Answers4