Родитель ширины кнопки соответствует: флаттер
Я новичок в Flutter, поэтому я хочу знать, как я могу установить ширину, чтобы соответствовать ширине родительского макета
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 расширяет представление в обоих направлениях, я не знаю, как это сделать. Помогите мне, если знаете, заранее спасибо.
27 ответов
Правильным решением было бы использовать SizedBox.expand виджет, который обеспечивает его child чтобы соответствовать размеру своего родителя.
new SizedBox.expand(
child: new RaisedButton(...),
)
Есть много альтернатив, которые позволяют более или менее настраивать:
new SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(...),
)
или используя ConstrainedBox
new ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: new RaisedButton(...),
)
new Container {
width: double.infinity,
child: new RaisedButton(...),
}
После некоторых исследований я нашел какое-то решение, и благодаря @Günter Zöchbauer,
Я использовал столбец вместо контейнера и
установите свойство в столбец CrossAxisAlignment.stretch, чтобы заполнить совпадение родительского элемента Button
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,
),
],
),
Ограничение размера может быть обеспечено с помощью 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: SidedBox.expand(
width: double.infinity,
child: Text('Raised Button'),
),
),
Самый простой способ - использовать FlatButton, обернутый внутри контейнера. Кнопка по умолчанию принимает размер своего родителя и назначает контейнеру желаемую ширину.
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,
),
),
),
)
приведенный выше виджет производит следующий вывод
h tt ps://stackru.com/images/c78c78dc2aa3cb3b14974ef562b267aa41f99c66.png
Вы можете установить соответствующий родительский элемент виджета с помощью
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: MedialQuery.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,
),
),
За match_parent вы можете использовать
SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(...)
)
Для любого конкретного значения вы можете использовать
SizedBox(
width: 100, // specific value
child: RaisedButton(...)
)
@ Мохит Сутар,
Нашел одно из лучших решений для соответствия родителя ширине и высоте, как показано ниже
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 Контроллер приобретает всю оставшуюся ширину и высоту.
Есть много способов сделать кнопку полной ширины. Но я думаю, вы должны понимать концепцию создания виджетов полной ширины в разных сценариях:
Когда вы используете вложенные виджеты, трудно определить ширину родительского виджета. Просто вы не можете указать ширину во вложенных виджетах. Поэтому вы должны использовать либо Expanded, либо Column с CrossAxisAlignment как Strech.
В других случаях вы можете использовать ширину медиа-запроса или double.infinity.
Вот несколько примеров вложенных виджетов и одного виджета:
Первый:
Expanded( // This will work for nested widgets and will take width of first parent widget.
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Второй:
Column( // This will not work if parent widget Row.
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
]
)
В третьих:
ButtonTheme( // if use media query, then will not work for nested widgets.
minWidth: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Четвертый:
SizedBox( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Пятый:
Container( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
С моей точки зрения, рекомендуемый будет Первый. Также вы можете изменить
MaterialButton к
ElevatedButton или
TextButton или
RaisedButton (Depreciated) или любой другой виджет.
Ваше здоровье!
Это сработало для меня.
Самый простой способ дать ширину или высоту соответствия родителю в приведенном выше коде.
...
width: double.infinity,
height: double.infinity,
...
Разместите свой RaisedButton(...) в SizedBox
SizedBox(
width: double.infinity,
child: RaisedButton(...),
)
Вы можете установить
fixedSize.width принадлежащий
ButtonStyle к очень большому количеству, например
double.maxFinite. Вы также можете использовать
Size.fromWidth() конструктор, если вы не хотите указывать высоту:
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(double.maxFinite),
),
),
Живая демонстрация
Вы можете сделать это с помощью MaterialButton
MaterialButton(
padding: EdgeInsets.all(12.0),
minWidth: double.infinity,
onPressed: () {},
child: Text("Btn"),
)
Самый простой подход - использовать контейнер, задав его ширину до бесконечности. См. Ниже пример кода
Container(
width: double.infinity,
child:FlatButton(
onPressed: () {
//your action here
},
child: Text("Button"),
)
)
OutlineButton(
onPressed: () {
logInButtonPressed(context);
},
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: Text(
“Log in”,
textAlign: TextAlign.center,
),
),
)
Что-то вроде этого у меня работает.
В Flutter 2.0
RaisedButton устарел и заменен на.
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'),
)
Это работает для меня.
SizedBox(
width: double.maxFinite,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: new Text("Button 2"),
color: Colors.lightBlueAccent,
onPressed: () => debugPrint("Button 2"),
),
),
RaisedButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text('Submit')],
)
)
Меня устраивает.
Это работает для меня в автономном виджете.
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.
Следующий код работает для меня
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
Использование ListTile также работает, так как список заполняет всю ширину:
new ListTile(
title: new RaisedButton(...),
),
Оберните ваш (дочерний виджет фиксированной ширины) центральным виджетом. Это будет центрировать ваш виджет:
Center(child:Container(width:250,child:TextButton(child:Text("Button Name),),)
Это сработало для меня
width: MediaQuery.of(context).size.width-100,
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
fixedSize: MaterialStateProperty.all(
Size(double.maxFinite, 50.0),
),
),
onPressed: () {},
child: Text('Upgrade to Premium'),
),
ПЫТАТЬСЯ
Flexible(
child: Row(
children: [
ElevatedButton(
onPressed: () {},
child: Text("love you}"),
),
],
),
),