¿Cómo agregar un ListView a una columna en Flutter?
Estoy intentando crear una página de inicio de sesión sencilla para mi aplicación Flutter. He creado con éxito TextFields y los botones de iniciar sesión/Iniciar sesión. Quiero agregar un ListView horizontal. Cuando ejecuto el código, mis elementos desaparecen, si lo hago sin ListView, vuelve a estar bien. ¿Cómo puedo hacer esto correctamente?
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("Login / Signup"),
),
body: new Container(
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
decoration: new InputDecoration(
hintText: "E M A I L A D D R E S S"
),
),
new Padding(padding: new EdgeInsets.all(15.00)),
new TextField(obscureText: true,
decoration: new InputDecoration(
hintText: "P A S S W O R D"
),
),
new Padding(padding: new EdgeInsets.all(15.00)),
new TextField(decoration: new InputDecoration(
hintText: "U S E R N A M E"
),),
new RaisedButton(onPressed: null,
child: new Text("SIGNUP"),),
new Padding(padding: new EdgeInsets.all(15.00)),
new RaisedButton(onPressed: null,
child: new Text("LOGIN"),),
new Padding(padding: new EdgeInsets.all(15.00)),
new ListView(scrollDirection: Axis.horizontal,
children: <Widget>[
new RaisedButton(onPressed: null,
child: new Text("Facebook"),),
new Padding(padding: new EdgeInsets.all(5.00)),
new RaisedButton(onPressed: null,
child: new Text("Google"),)
],)
],
),
),
margin: new EdgeInsets.all(15.00),
),
),
);
Yo también tengo este problema. Mi solución es usar Expanded
un widget para expandir el espacio restante.
Column(
children: <Widget>[
Expanded(
child: horizontalList,
)
],
);
Motivo del error:
Column
se expande al tamaño máximo en la dirección del eje principal (eje vertical), al igual que el archivo ListView
.
Soluciones:
Por lo tanto, es necesario limitar la altura del archivo ListView
. Hay muchas formas de hacerlo, puedes elegir la que mejor se adapte a tu necesidad.
Si desea permitir
ListView
que ocupe todo el espacio restante en el interiorColumn
, utiliceExpanded
.Column( children: <Widget>[ Expanded( // <-- Use Expanded child: ListView(...), ) ], )
Si desea limitar su
ListView
a un determinadoheight
, utiliceSizedBox
.Column( children: <Widget>[ SizedBox( height: 200, // Constrain height. child: ListView(...), ) ], )
Si
ListView
es pequeño, puede probarshrinkWrap
una propiedad en él.Column( children: <Widget>[ ListView( shrinkWrap: true, // Set this ) ], )
Si quieres hacerlo
ListView
lo más pequeño posible, úsaloFlexible
conListView.shrinkWrap
:Column( children: <Widget>[ Flexible( // <-- Use Flexible child: ListView( shrinkWrap: true, // and set this ), ) ], )
Puede comprobar la salida de la consola. Imprime error:
Se lanzó la siguiente afirmación durante performResize(): A la ventana gráfica horizontal se le dio una altura ilimitada. Las ventanas gráficas se expanden en el eje transversal para llenar su contenedor y restringen a sus hijos para que coincidan con su extensión en el eje transversal. En este caso, a una ventana gráfica horizontal se le dio una cantidad ilimitada de espacio vertical para expandirse.
Debe agregar una restricción de altura a su lista horizontal. Por ejemplo, envolver en SizedBox con altura:
SizedBox(
height: 44.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
RaisedButton(
onPressed: null,
child: Text("Facebook"),
),
Padding(padding: EdgeInsets.all(5.00)),
RaisedButton(
onPressed: null,
child: Text("Google"),
)
],
),
)