Recibo una excepción de representación que no entiendo cómo solucionarlo. Estoy intentando crear una columna que tiene 3 filas.
Fila [Imagen]
Fila [TextField]
Fila [Botones]
Aquí está mi código para construir el contenedor:
Container buildEnterAppContainer(BuildContext context) {
var container = new Container(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
buildImageRow(context),
buildAppEntryRow(context),
buildButtonRow(context)
],
),
);
return container;
}
y mi código buildAppEntryRow para el contenedor de texto
Widget buildAppEntryRow(BuildContext context) {
return new Row(
children: <Widget>[
new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
)
],
);
}
Cuando corro me sale la siguiente excepción:
I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674): RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674): BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
Si cambio buildAppEntryRow a solo un TextField como este
Widget buildAppEntryRow2(BuildContext context) {
return new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
);
}
Ya no tengo la excepción. ¿Qué me falta con la implementación de la fila que hace que no pueda calcular el tamaño de esa fila?
mainAxisAlignment
para el widget Fila. Con dos widgets de texto no hay problema, pero con un widget de texto y un widget Textfield contenidoFlexible
se alinea a la izquierda sin espacios.Obtiene este error porque se
TextField
expande en dirección horizontal y también lo hace elRow
, por lo que debemos restringir el ancho delTextField
, hay muchas formas de hacerlo.Utilizar
Expanded
Utilizar
Flexible
Envuélvala
Container
oSizedBox
proporcionewidth
fuente
TextField
en una fila.debe usar Flexible para usar un campo de texto dentro de una fila.
fuente
Container
, puedes usarloFlexible
directamente.La solución es envolver
Text()
dentro de uno de los siguientes widgets: OExpanded
oFlexible
. Entonces, su código usando Expandido será como:fuente
Como @Asif Shiraz mencionó, tuve el mismo problema y lo resolví envolviendo la columna en una flexible, aquí como esta,
fuente
Una solución simple es envolver su
Text()
interior aContainer()
. Entonces, su código será como:Aquí también obtiene el atributo de ancho y alto de un contenedor para ajustar la apariencia de su campo de texto. No es necesario usarlo
Flexible
si está ajustando su campo de texto dentro de un Contenedor.fuente
width: n