dart - Ancho del botón Emparejar padre: aleteo

flutter flutter-layout

Question

Soy nuevo en Flutter, así que quiero saber cómo puedo establecer un ancho para que coincida con el ancho del diseño principal

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

Sé un poco sobre la etiqueta expandida pero expandí la vista expandida en ambas direcciones, no sé cómo hacerlo. Ayúdame si lo sabes, gracias de antemano.

Answer 1

@Mohit Suthar,

Encontré una de las mejores soluciones para hacer coincidir el padre con el ancho y la altura como se muestra a continuación

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

Aquí puede verificar que el controlador Expanded adquiera todo el ancho y la altura restantes .

Answer 2

Bandeja double.infinity para ancho de caja de tamaño

new SizedBox(
width: double.infinity,
child: RaisedButton(...),
)

Answer 3

Después de investigar un poco, descubrí una solución y gracias a @ Günter Zöchbauer,

Usé columna en lugar de Contenedor y

establezca la propiedad en la columna CrossAxisAlignment.stretch para llenar la coincidencia primaria del botón

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

Answer 4

El atributo de tamaño se puede proporcionar usando ButtonTheme con minWidth: double.infinity

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

o después de https://github.com/flutter/flutter/pull/19416 aterrizó

MaterialButton(
onPressed: () {},
child: SizedBox.expand(
width: double.infinity,
child: Text(''Raised Button''),
),
),

Answer 5

El siguiente código me funciona

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

Answer 6

Esto funcionó para mí.

La forma más simple de dar ancho o alto de coincidencia entre padres en el código dado arriba.

...
width: double.infinity,
height: double.infinity,
...

Answer 7

Esto es trabajo para mí.

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

Answer 8

Esto está funcionando para mí en un widget autónomo.

 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.

Answer 9

La forma más simple es usar un FlatButton envuelto dentro de un contenedor. El botón toma el tamaño de su padre por defecto y así asigna el ancho deseado al contenedor.

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

el widget anterior produce el siguiente resultado

Answer 10

La solución correcta sería usar el widget SizedBox.expand , que SizedBox.expand que su child coincida con el tamaño de su padre.

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

Hay muchas alternativas, lo que permite una mayor o menor personalización:

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

o usando un ConstrainedBox

new ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: new RaisedButton(...),
)

Answer 11

Para match_parent puedes usar

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

Para cualquier valor particular puede usar

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

Answer 12

el uso de ListTile también funciona bien, ya que una lista ocupa todo el ancho:

new ListTile(
title: new RaisedButton(...),
),

Answer 13

 new Container {
width: double.infinity,
child: new RaisedButton(...),
}

Answer 14

 new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)