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

flutter container full width
flutter button full width
flutter container height match parent
flutter raisedbutton full width
flutter font size based on screen size
limited box flutter

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.

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

How to set size to FloatingActionButton, How do you change the width of a raised button in flutter? When someone learning Flutter asks you why some widget with width:100 is not 100 pixels wide, the default answer is to tell them to put that widget inside of a Center, right?. Don’t do that. If

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.

Dealing with box constraints, How do you reduce the size of a floating action button in flutter? This means that either the maximum width or the maximum height is set to double.INFINITY. A box that tries to be as big as possible won’t function usefully when given an unbounded constraint and, in debug mode, such a combination throws an exception that points to this file.

Flutter: The Advanced Layout Rule Even Beginners Must Know, Constraints consist of minimum and maximum widths and heights; sizes Many of the boxes in Flutter, especially those that just take a single child, wide as possible, which is infinitely wide, since the outer one is scrollable in that direction. A bounded widget have some definite value for its max width and max height property. A bounded widget can have a tight width, tight height or both. A widget have tight width if it have same value for both min Width and max Width property. Same analogy goes for tight height. Bounded widgets honor the constraints and try to be as big as possible.

Flutter Layout Cheat Sheet - Flutter Community, When someone learning Flutter asks you why some widget with width:100 is not Parent —You must be from 90 to 300 pixels wide, and 30 to 85 tall. no child and no fixed size, it decides it wants to be as big as possible, so it fits the whole screen. It wants to have 1000 pixels, so it will end up having 150 (the maximum​). A material design "raised button". A raised button is based on a Material widget whose Material.elevation increases when the button is pressed. Use raised buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using raised buttons on already-raised content such as dialogs or cards.

How To Make A Button Full Width in Flutter · zaiste.net, Still, it is work in progress — the catalogue of samples will grow. But you would like to have all buttons as wide as the widest, just use IntrinsicWidth : By default​, most of the widgets will use as little space as possible: how much space a widget can have — you specify min / max of height / width . The button’s border shape is defined by shape and its appearance is defined by three new parameters: borderSide, disabledBorderColor, and highlightedBorderColor. Default border: One pixel wide

Medical Electronic Laboratory Equipment 1967-68: Pergamon , How To Make A Button Full Width in Flutter. Use the SizedBox widget, which enforces the child to match its parent size: SizedBox.expand( child: new  A Row is a widget used to display child widgets in a horizontal manner. The Row widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient

Comments
  • 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).
  • 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).
  • In your code, even with double.maxFinite, the button doesn't stretch.
  • Can you share screenshot of how it looks like?
  • It looks exactly like your screenshot.
  • 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.
  • I see, I've updated my answer. That should do it.
  • In your revised answer, the button no longer grows at all, no matter how large a value you set as maxWidth
  • Try to wrap the RaisedButton in an Expanded widget. Does that give the right result?
  • I'm afraid not.