Clase ListView en Flutter

En Flutter , ListView es una lista desplazable de widgets dispuestos linealmente. Muestra a sus hijos uno tras otro en la dirección de desplazamiento, es decir, vertical u horizontal.

Hay diferentes tipos de ListView:

• Vista de la lista
• ListView.builder
• ListView.separated
• ListView.personalizado

Constructor de la clase ListView:

ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Constructor de la clase ListView.builder:

ListView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Constructor de la clase ListView.custom:

const ListView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Constructor de la clase ListView.separated:

ListView.separated(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required IndexedWidgetBuilder itemBuilder,
@required IndexedWidgetBuilder separatorBuilder,
@required int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Propiedades del widget ListView:

• childrenDelegate: esta propiedad toma SliverChildDelegate como objeto. Sirve como un delegado que proporcionó los elementos secundarios para ListView .
• clipBehaviour: esta propiedad contiene Clip enum (final) como objeto. Controla si el contenido en ListView se recortará o no.
• itemExtent : itemExtent toma un valor doble como objeto para controlar el área desplazable en ListView.
• padding: contiene EdgeInsetsGeometryI como el objeto para dar espacio entre Listview y sus elementos secundarios.
• scrollDirection: esta propiedad toma Axis enum como el objeto para decidir la dirección del desplazamiento en ListView.
• ShrinkWrap: esta propiedad toma un valor booleano como objeto para decidir si el tamaño del área desplazable será determinado por los contenidos dentro de ListView.

Vista de la lista()

Este es el constructor predeterminado de la clase ListView. Un ListView simplemente toma una lista de widgets y la hace desplazable. Por lo general, esto se usa con algunos niños, ya que la Lista también construirá elementos invisibles en la lista, por lo que numerosos widgets pueden generar esto de manera ineficiente.

ListView(
          padding: EdgeInsets.all(20),
          children: <Widget>[
            CircleAvatar(
              maxRadius: 50,
              backgroundColor: Colors.black,
              child: Icon(Icons.person, color: Colors.white, size: 50),
            ),
            Center(
              child: Text(
                'Sooraj S Nair',
                style: TextStyle(
                  fontSize: 50,
                ),
              ),
            ),
            Text(
              "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum,It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
              style: TextStyle(
                fontSize: 20,
              ),
            ),
          ],
        ),

Producción:

ListView.constructor()

El constructor builder() construye una lista repetitiva de widgets. El constructor toma dos parámetros principales:  

• ItemCount para el número de repeticiones del widget que se va a construir (no obligatorio) .
• Un itemBuilder para construir el widget que se generará ‘ itemCount ‘ veces (obligatorio).

Si no se especifica itemCount , se construirán infinitos widgets de forma predeterminada. 

ListView.builder(
          itemCount: 20,
          itemBuilder: (context, position) {
            return Card(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(
                  position.toString(),
                  style: TextStyle(fontSize: 22.0),
                ),
              ),
            );
          },
        ),

Producción:

ListView.separado()

El constructor ListView.separated() se usa para generar una lista de widgets, pero además, también se puede generar un widget separador para separar los widgets. En resumen, se trata de dos listas entrelazadas de widgets: la lista principal y la lista de separación. A diferencia del constructor builder(), el parámetro itemCount es obligatorio aquí.

ListView.separated(
          itemBuilder: (context, position) {
            return Card(
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(
                  'List Item $position',
                ),
              ),
            );
          },
          separatorBuilder: (context, position) {
            return Card(
              color: Colors.grey,
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Text(
                  'Separator $position',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
          itemCount: 20,
        ),

Producción:

ListView.personalizado()

Como sugiere el nombre, el constructor ListView.custom() nos permite crear ListViews con funciones personalizadas sobre cómo se construyen los elementos secundarios de la lista. El parámetro principal de este constructor es un SliverChildDelegate que construye los elementos. 

 Los tipos de SliverChildDelegates son:  

• SliverChildListDelegate
• SliverChildBuilderDelegado

SliverChildListDelegate acepta una lista de widgets secundarios . mientras que SliverChildBuilderDelegate acepta un IndexedWidgetBuilder, simplemente una función builder(). Profundizando más, podemos inferir que ListView.builder se creó utilizando ListView.custom con SliverChildBuilderDelegate . Además, el constructor ListView() predeterminado es un ListView.custom con un SliverChildListDelegate.