Як встановити ширину кнопки RaisedButton у Flutter?

Я бачив, що не можу встановити ширину a 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,
  ),
),

Як сказано в документації тут

Підняті кнопки мають мінімальний розмір 88,0 на 36,0, який можна замінити кнопкою ButtonTheme.

Ви можете зробити це так

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

Для match_parentвас можна використовувати

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

Для будь-якого конкретного значення ви можете використовувати

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

Це тому, що тріпотіння - це не розмір. Йдеться про обмеження.

Зазвичай ми маємо 2 варіанти використання:

• Дочірній елемент віджету визначає обмеження. Сам батьківський розмір базується на цій інформації. ех:, Paddingякий приймає обмеження для дитини та збільшує його.
• Батьки застосовують обмеження до своєї дитини. наприклад:, SizedBoxале також Columnу стреч-режимі, ...

RaisedButtonце перший випадок. Що означає, що кнопка визначає власну висоту / ширину. І, згідно з матеріальними правилами, збільшений розмір кнопки зафіксовано.

Ви не хочете такої поведінки, тому ви можете використовувати віджет другого типу, щоб замінити обмеження кнопок.

У будь-якому випадку, якщо вам це багато потрібно, розгляньте можливість створення нового віджета, який виконує цю роботу за вас. Або використання MaterialButton, яке має властивість висоти.

я б рекомендував використовувати 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,
)

Вам потрібно використовувати розширений віджет. Але якщо ваша кнопка знаходиться на стовпці, розширений віджет заповнює решту стовпця. Отже, вам потрібно вкласти розширений віджет у рядок.

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

Мій найкращий спосіб зробити кнопку "Підняти" з батьківським збігом - обернути її контейнером. нижче - зразок коду.

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

Цей фрагмент коду допоможе вам краще вирішити вашу проблему, оскільки ми не можемо вказати ширину безпосередньо до 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,
    );

Просто використовуйте FractionallySizedBox, де widthFactor& heightFactor визначте відсоток розміру програми / батьків.

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

Використовуйте Media Query, щоб розумно використовувати ширину для вашого рішення, яке буде працювати однаково для малого та великого екрану

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

Ви можете застосувати подібне рішення SizeBoxтакож.

Якщо ви хочете глобально змінити висоту та мінімальну ширину всіх ваших RaisedButtons, тоді ви можете замінити ThemeDataвсередині вашого MaterialApp:

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

Загорніть RaisedButton всередину контейнера та надайте ширину віджету контейнера.

напр

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

Ви можете створити глобальний метод, наприклад, для кнопки, яка використовується в усьому додатку. Змінюватиметься відповідно до довжини тексту всередині контейнера. Віджет FittedBox використовується, щоб віджет підходив відповідно до дитини всередині нього.

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

Якщо вам потрібна кнопка певної ширини та висоти, ви можете використовувати властивість обмеження RawMaterialButton для надання мінімальної максимальної ширини та висоти кнопки

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

Ви можете зробити так, як кажуть у коментарях, або заощадити зусилля та працювати з 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,),
              ),
              )
)

Якщо кнопка розміщена у Flexвіджеті (включаючи Row& Column), ви можете обернути її за допомогою розширеного віджета, щоб заповнити вільний простір.

У моєму випадку я використав поле, щоб мати змогу змінити розмір:

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

Спробуй

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

Якщо ви не хочете видаляти всі налаштовані теми кнопок.

ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Якщо у вас є кнопка всередині стовпця () і ви хочете, щоб кнопка приймала максимальну ширину, встановіть:

crossAxisAlignment: CrossAxisAlignment.stretch

у віджеті Стовпець. Тепер все в цьому стовпці () матиме максимально доступну ширину

Це спрацювало для мене. Контейнер забезпечує висоту, а FractionallySizedBox - ширину RaisedButton.

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),

Коротке та солодке рішення для кнопки на всю ширину:

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)