Saltar al contenido

¿Cómo agregar un ListView a una columna en Flutter?

Después de tanto trabajar hemos dado con el arreglo de este rompecabezas que agunos lectores de nuestro espacio han tenido. Si tienes algo más que aportar no dejes de dejar tu comentario.

Solución:

Yo también tengo este problema. mi solución es usar Expanded widget para expandir el espacio restante.

new Column(
  children: [
    new 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 ListView.

Soluciones

Por lo tanto, es necesario restringir la altura de la ListView. Hay muchas formas de hacerlo, puedes elegir la que mejor se adapte a tus necesidades.


  1. Si quieres permitir ListView para ocupar todo el espacio restante en el interior Column usar Expanded.

    Column(
      children: [
        Expanded(
          child: ListView(...),
        )
      ],
    )
    

  1. Si desea limitar su ListView a cierto heightpuedes usar SizedBox.

    Column(
      children: [
        SizedBox(
          height: 200, // constrain height
          child: ListView(),
        )
      ],
    )
    

  1. Si tu ListView es pequeño, puedes probar shrinkWrap propiedad sobre ella.

    Column(
      children: [
        ListView(
          shrinkWrap: true, // use it
        )
      ],
    )
    

Puede comprobar la salida de la consola. Imprime error:

Se lanzó la siguiente aserción durante performResize(): A la ventana de visualización horizontal se le otorgó 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 de visualización horizontal se le otorgó una cantidad ilimitada de espacio vertical para expandirse.

Debe agregar una restricción de altura a su lista horizontal. Por ejemplo, envolver en Contenedor con altura:

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

Reseñas y puntuaciones del artículo

Agradecemos que quieras sustentar nuestro ensayo exponiendo un comentario y dejando una puntuación te estamos agradecidos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *