Как установить ширину RaisedButton в Flutter?

Я видел, что я не могу установить ширину RaisedButton в Flutter. Если я хорошо понял, я должен поместить RaisedButton в SizedBox. Затем я смогу установить ширину или высоту коробки. Это правильно? Есть ли другой способ сделать это?

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

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

Ответы

Ответ 1

Как сказано в документации здесь

Поднятые кнопки имеют минимальный размер 88.0 на 36.0, который можно переопределить с помощью ButtonTheme.

Вы можете сделать это так

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Ответ 2

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

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

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

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

Ответ 3

Это потому, что флаттер не имеет размера. Это о ограничениях.

Обычно у нас есть 2 варианта использования:

  • Ребенок виджета определяет ограничение. Сам родительский размер основывается на этой информации. ex: Padding, которая берет ограничение для ребенка и увеличивает его.
  • Родитель принуждает к этому ограничение для ребенка. ex: SizedBox, но также Column в режиме strech,...

RaisedButton - это первый случай. Это означает, что это кнопка, которая определяет ее собственную высоту/ширину. И, согласно материальным правилам, размер поднятой кнопки фиксирован.

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

В любом случае, если вам это нужно, подумайте о создании нового виджета, который выполняет эту работу для вас. Или используйте MaterialButton, которые обладают свойством высоты.

Ответ 4

я бы рекомендовал использовать MaterialButton, чем вы можете сделать это следующим образом:

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

Ответ 5

Этот фрагмент кода поможет вам лучше решить вашу проблему, так как мы не можем указать ширину непосредственно в RaisedButton, мы можем указать ширину для него child

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

Ответ 6

Вам нужно использовать расширенный виджет. Но если ваша кнопка находится в столбце, расширенный виджет заполняет оставшуюся часть столбца. Итак, вам нужно заключить расширенный виджет в строку.

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

Ответ 7

Если вы хотите глобально изменить высоту и minWidth всех ваших RaisedButton, то вы можете переопределить ThemeData внутри вашего MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

Ответ 8

Если вы хотите, чтобы RainseButton занимал место в родительском RainseButton, попробуйте расширенный виджет

Ответ 9

вы можете делать, как говорится в комментариях, или вы можете сэкономить усилия и работать с RawMaterialButton. которые имеют все, и вы можете изменить границу, чтобы быть круглой и много других атрибутов. бывшая форма (увеличьте радиус, чтобы иметь более круглую форму)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

и вы можете использовать любую фигуру в качестве кнопки, используя GestureDetector, который является виджетом и принимает другой виджет под дочерним атрибутом. как в другом примере здесь

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

Ответ 10

Мой предпочтительный способ сделать кнопку Raise с подходящим родителем - обернуть ее контейнером. ниже приведен пример кода.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )