Ширина кнопки соответствует родительскому элементу

Я хочу знать, как установить ширину, соответствующую ширине родительского макета

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

Я знаю немного о Expanded виджете, но Expanded расширяет обзор в обоих направлениях, я не знаю, как это сделать.


flutter flutter-layout
person Mohit Suthar    schedule 25.04.2018    source источник
comment
Может, вместо этого колонка?   -  person Günter Zöchbauer    schedule 25.04.2018
comment
Да, я прикрепляю столбец вместо контейнера, но ширина кнопки - это обернуть содержимое, как можно растянуть ширину до родительского   -  person Mohit Suthar    schedule 25.04.2018
comment
Вы можете просто использовать FlatButton и обернуть его внутри контейнера и добавить ширину контейнера к ширине экрана, используя медиа-запрос. Найдите мой ответ ниже.   -  person Mahesh Jamdade    schedule 16.02.2019

Ответы (19)


arrow_upward
344
arrow_downward

Обновление:

Во Flutter 2.0 RaisedButton устарел и заменен на ElevatedButton. вы можете использовать minimumSize так:

ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: Size(double.infinity, 30), // double.infinity is the width and 30 is the height
        ),
        onPressed: () {},
        child: Text('Text Of Button'),
      )

Старый ответ для Flutter меньше 2.0:

Правильным решением было бы использовать виджет SizedBox.expand, который заставляет его child соответствовать размеру своего родителя.

SizedBox.expand(
  child: RaisedButton(...),
)

Есть много альтернатив, которые позволяют более или менее настраивать:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

или используя ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)
person Rémi Rousselet    schedule 25.04.2018
comment
SizedBox.expand заставит кнопку принимать всю ширину и высоту, вопрос не в этом. Речь идет о кнопке, занимающей всю ширину, а не высоту. - person Vinoth Kumar; 28.05.2018
comment
Комментарий @ RémiRousselet Винота действителен. Поскольку теперь это принятый ответ, не могли бы вы добавить правильные конструкторы для SizedBox, чтобы специально расширять только ширину? - person user823447; 21.04.2019
comment
Я получаю эту ошибку Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true. - person kapsid; 18.01.2020
comment
Почему мы не могли просто изменить ширину контейнера вот так: Container(width: double.infinity) вместо того, чтобы обернуть его другим виджетом, например SizedBox. Его гораздо проще читать и он дает те же результаты. - person samisnotinsane; 19.06.2020

arrow_upward
37
arrow_downward

Атрибут размера может быть предоставлен с использованием ButtonTheme с minWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

или после приземления https://github.com/flutter/flutter/pull/19416

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),
person Günter Zöchbauer    schedule 17.07.2018

arrow_upward
28
arrow_downward

Самый простой способ - использовать FlatButton, заключенный в Container. Кнопка по умолчанию принимает размер своего родителя и, таким образом, назначает желаемую ширину для Container.

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

Выход:

введите описание изображения здесь

person Mahesh Jamdade    schedule 16.02.2019

arrow_upward
24
arrow_downward

После некоторого исследования я нашел какое-то решение, и благодаря @ Günter Zöchbauer,

Я использовал столбец вместо контейнера и

установите свойство в столбец CrossAxisAlignment.stretch, чтобы заполнить соответствующий родительский элемент кнопки

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),
person Mohit Suthar    schedule 25.04.2018
comment
_1 _ / _ 2_ не следует использовать для однодетского макета. Вместо этого используйте альтернативу с одним ребенком. Такие как Align, SizedBox и подобные. - person Rémi Rousselet; 25.04.2018

arrow_upward
8
arrow_downward

Вы можете установить соответствующий родительский элемент виджета с помощью

1) установите для ширины значение double.infinity:

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) Используйте MediaQuery:

new Container(
          width: MediaQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),
person Hetal    schedule 01.02.2020
comment
У вас опечатка в MediaLQuery, я не могу редактировать ни одного символа;) - person MappaM; 06.05.2021

arrow_upward
5
arrow_downward

@ Мохит Сутар,

Найдено одно из лучших решений для сопоставления родительского элемента с шириной, а также с высотой, как показано ниже.

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ),

Здесь вы можете проверить, что Expanded Контроллер получает все, сохраняет ширину и высоту.

person TejaDroid    schedule 18.09.2018

arrow_upward
4
arrow_downward

Для match_parent вы можете использовать

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

Для любого конкретного значения вы можете использовать

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)
person CopsOnRoad    schedule 03.06.2019

arrow_upward
4
arrow_downward

Самый простой способ указать ширину или высоту родительского элемента в приведенном выше коде.

...
width: double.infinity,
height: double.infinity,
...
person bunny    schedule 28.03.2019

arrow_upward
3
arrow_downward

вы можете сделать это с помощью MaterialButton

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)
person Mahmoud Abu Elheja    schedule 23.01.2020

arrow_upward
2
arrow_downward

Самый простой подход - использовать контейнер, задав его ширину до бесконечности. См. Ниже пример кода

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)
person Tajul Asri    schedule 08.02.2020

arrow_upward
2
arrow_downward 

         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(
                  “Log in”,
                  textAlign: TextAlign.center,
                ),
              ),
            )

Что-то вроде этого у меня работает.

person Adam Smaka    schedule 03.03.2020

arrow_upward
1
arrow_downward

Следующий код работает для меня

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
person rinkesh    schedule 17.08.2018

arrow_upward
1
arrow_downward

Это работает для меня в автономном виджете.

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.
person PaulDef515    schedule 29.10.2018

arrow_upward
1
arrow_downward

Это работает для меня.

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ),
person kelvincer    schedule 08.04.2019

arrow_upward
1
arrow_downward

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) У меня работает.

person TaoZang    schedule 03.02.2020

arrow_upward
1
arrow_downward

В Flutter 2.0 RaisedButton устарел и заменен на ElevatedButton.

Свойство minimumSize виджета ElevatedButton делает именно это.

Пример кода:

ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
              onPrimary: Colors.white,
              shadowColor: Colors.greenAccent,
              elevation: 3,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0)),
              minimumSize: Size(100, 40), //////// HERE
            ),
            onPressed: () {},
            child: Text('MyButton'),
          )
person Ruslanbek0809    schedule 06.05.2021

arrow_upward
0
arrow_downward

Использование ListTile также работает, поскольку список заполняет всю ширину:

ListTile(
  title: new RaisedButton(...),
),
person Oush    schedule 28.05.2018

arrow_upward
0
arrow_downward

Это сработало для меня

width: MediaQuery.of(context).size.width-100,
person kapsid    schedule 18.01.2020

arrow_upward
0
arrow_downward

Оберните ваш (дочерний виджет фиксированной ширины) центральным виджетом. Это будет центрировать ваш виджет:

Center(child:Container(width:250,child:TextButton(child:Text("Button Name),),)
person A.K.J.94    schedule 22.04.2021