Как сделать так, чтобы кнопка флаттера была максимально широкой до максимальной ширины?

Question

В следующем макете я бы хотел, чтобы кнопка была настолько широкой, насколько это возможно на экране, до максимальной ширины. Я пробовал следующее, которое не работает (кнопка всегда максимально широка):

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: () {}),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Чтобы развернуть раскладку, которую я ищу: кнопка должна быть одинаковой ширины. как меньшее из следующих двух величин: 1) ширина экрана, 2) заданная фиксированная максимальная ширина.

Примеры сценариев:

A) ширина экрана составляет 1000 пикселей, изаданная фиксированная максимальная ширина составляет 600 пикселей, тогда ширина кнопки будет равна 600 пикселям.

B) ширина экрана составляет 400 пикселей, а заданная фиксированная максимальная ширина составляет 600 пикселей, тогда кнопка будет иметь размер 400 пикселей. широкий.

Answer 1

Вы можете удалить crossAxisAlignment: CrossAxisAlignment.stretch, потому что TextFormField все равно растягивается. Этот код сделает ширину кнопки максимальной ширины, но не больше ширины экрана:

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

Answer 2

Решение довольно простое, просто оберните ConstrainedBox в Align и вместо maxWidth используйте minWidth.

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

Вывод:

• Если ширина экрана> 200, кнопка занимает ширину 200

• Если ширина экрана <200, кнопка занимает ширину экрана </p>

Answer 3

Вы можете поместить RaisedButton в 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')),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

. Row создаст горизонтальную строку, а виджет RaisedButton займет столько же места, сколько и его собственный. размер.