Muchas veces cuando creamos nuestras aplicaciones en Android, iOS una aplicación en general, nos interesa crear un listado multinivel o un listado anidado, es decir, que teniendo el listado, si le damos un clic o toque se expanda y aparezca otro listado o al menos, más información, esto es algo complicado de crear si empleamos Android o iOS nativo pero con Flutter estamos de suerte y tenemos un widget que permite hacer este comportamiento.

 

El Expandable ListView es un widget en Flutter muy interesante y útil en muchos casos ya que permite crear listas desplegables con contenido oculto que es mostrado cuando le damos un click, así de simple.

Esta funcionalidad es especialmente útil cuando se necesita mostrar información adicional en una lista sin ocupar demasiado espacio en la pantalla.

Primeros pasos con el Exandable ListView en Flutter

El Expandable ListView se utiliza en conjunto con el widget ListView, que es responsable de mostrar los elementos del listado. Al utilizar el Expandable ListView, podemos ocultar o mostrar contenido adicional al hacer clic o toque en un elemento de la lista.

Una de las características más destacadas del Expandable ListView es su capacidad para expandirse y contraerse de forma animada. Esto crea una experiencia de usuario atractiva y mejora la usabilidad de la aplicación.

Para implementar el Expandable ListView, se deben seguir algunos pasos simples. Primero, creamos una lista de elementos que queremos mostrar en nuestra aplicación. Luego, utilizamos el widget ListView.builder para construir la lista y el widget Expandable ListView.builder para agregar la funcionalidad desplegable.

Dentro del widget Expandable ListView.builder, definimos cómo se comportará cada elemento de la lista cuando se expanda o contraiga. Podemos personalizar el contenido adicional que se mostrará al expandirse, como imágenes, texto o incluso otros widgets.

Además de la funcionalidad básica de expansión y contracción, el Expandable ListView también ofrece opciones de personalización. Podemos ajustar la apariencia de los encabezados y los íconos utilizados para indicar el estado de cada elemento de la lista.

El Expandable ListView en Flutter es una herramienta poderosa para crear interfaces de usuario dinámicas y atractivas. Permite a los desarrolladores mostrar información adicional de manera efectiva en una lista sin abrumar al usuario con demasiada información de una sola vez.

Veamos un ejemplo

ExpansionTile(
  title: Text('Título del elemento'),
  children: <Widget>[
    ListTile(
      title: Text('Element 1'),
    ),
    ListTile(
      title: Text('Element 2'),
    ),
    ListTile(
      title: Text('Element 3'),
    ),
  ],
)

El ExpansionTile tiene características similares a los del ListTile como el título, subtítulo, puedes emplear la opción de ayuda de VSC o Android Studio para ver más información.

Aquí te doy otro ejemplo en el cual, muestro como crear un listado de listado que era el objetivo original de esta publicación:

ListView.builder(
          shrinkWrap: true,
          itemCount: widget.tutorialModel.tutorialSectionsModel.length,
          itemBuilder: (context, index) {
            return ExpansionTile(
              title: Text('TEXT'),
              subtitle: Text('TEXT'),
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: 10,
                  itemBuilder: (context, index2) {
                    return ListTile(
                      title: Row(
                        children: [
                          Checkbox(
                            value: true,
                            onChanged: (value) {},
                          ),***
                    );
                  },
                )
              ],
            );
          },
        )

Como puedes apreciar, ya que, el ExpansionTile recibe un children o conjunto de widgets, podemos colocar una columna y como elemento único otro Listview y con esto, tenemos un Listview de Listview en Flutter.