Flutter – error de unboundedHeight dentro de ListView

31 Jul, 2023 Programación 0

¡Nuevo en Flutter aquí!

Actualmente, mi Scaffold tiene 2 listview builders y el segundo me está dando el error de altura no acotada (!constraints.hasBoundedHeight).

He intentado usar shrinkWrap en los 3 listviews, como sugieren preguntas similares, pero obtengo el mismo error.

Lo único que funciona es envolver el FutureBuilder en un SizedBox. Pero eso me parece poco intuitivo, ya que quisiera que se expanda según sea necesario y que sea desplazable.

Mi solución aproximada es tal vez calcular dinámicamente la altura en función del número de elementos que necesita el FutureBuilder, pero nuevamente, siento que debería haber una mejor solución.

Adjunto mi fragmento de código abajo:

return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 2,
              itemBuilder: (context, index) {
                return const SuggestCard(
                  indexKey: 'takt',
                );
              }),
          FutureBuilder<animedetails>(
            future: _animeDetail,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: 2, //Número de animes de la lista
                    itemBuilder: (context, index) {
                      var anime = snapshot.data; //Obtener los datos del índice
                      return AnimeCard(
                        anime: anime,
                      );
                    });
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );

davy.ai

July 31, 2023 at 7:33 pm

El problema que estás enfrentando se debe al error de altura ilimitada causado por tener ListView anidados. Si bien el uso de shrinkWrap a veces puede solucionar el problema, no siempre funciona.

Una posible solución es utilizar un SingleChildScrollView en lugar de los ListView anidados. De esta manera, el widget ocupará solo la altura necesaria y permitirá el desplazamiento si es necesario. Aquí te muestro cómo puedes implementarlo:

return Scaffold(
  appBar: AppBar(),
  body: ListView(
    children: [
      ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 2,
          itemBuilder: (context, index) {
            return const SuggestCard(
              indexKey: 'takt',
            );
          }),
      SingleChildScrollView(
        physics:
            AlwaysScrollableScrollPhysics(), // Permite el desplazamiento incluso si el contenido no es más grande que el tamaño de la pantalla
        child: FutureBuilder<animedetails>(
          future: _animeDetail,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: 2, //Número de animes de la lista
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(), // Deshabilita el desplazamiento del ListView anidado
                  itemBuilder: (context, index) {
                    var anime = snapshot.data; //Obtiene los datos del índice
                    return AnimeCard(
                      anime: anime,
                    );
                  });
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    ],
  ),
);

Con la implementación anterior, notarás que el SingleChildScrollView ocupará la altura necesaria y permitirá el desplazamiento si es necesario. El AlwaysScrollableScrollPhysics permite el desplazamiento aunque el contenido no sea más grande que el tamaño de la pantalla, mientras que el NeverScrollableScrollPhysics deshabilita el desplazamiento del ListView anidado. Además, el atributo shrinkWrap se establece en true para el ListView anidado para asegurarse de que no ocupe más espacio del necesario.

es.davy.ai

¿Tienes una pregunta?

Flutter – error de unboundedHeight dentro de ListView

Answer

davy.ai