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.

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

Solution 2

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

Solution 3

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.

Comments

[Matt R]

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

[Kirill Bubochkin]

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

[Matt R]

In your code, even with double.maxFinite, the button doesn't stretch.

[Kirill Bubochkin]

Can you share screenshot of how it looks like?

[Matt R]

It looks exactly like your screenshot.

[Kirill Bubochkin]

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.

[Matt R]

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.

[Kirill Bubochkin]

So you want the button to always be of predefined width, regardless of the content, right?

[Matt R]

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]

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.

[Kirill Bubochkin]

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]

Let us continue this discussion in chat.

[Matt R]

In your revised answer, the button no longer grows at all, no matter how large a value you set as maxWidth

[Kirill Bubochkin]

I see your update in post, and I've updated my answer.

[jurrdb]

Try to wrap the RaisedButton in an Expanded widget. Does that give the right result?

[Matt R]

I'm afraid not.