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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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,
    );

Answer 5

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

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

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

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

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

Answer 9

Я бы порекомендовал использовать 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,
)

Answer 10

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

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

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

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

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

---

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