Listview.builder en Flutter

ListView es un widget muy importante en un aleteo. Se usa para crear la lista de elementos secundarios. Pero cuando queremos crear una lista recursivamente sin escribir código una y otra vez, se usa ListView.builder en lugar de ListView.  ListView.builder crea una array lineal desplazable de widgets.

ListView.builder de forma predeterminada no admite la reordenación de elementos secundarios.

El constructor de ListView.builder:

ListView.builder({Key key, 
Axis scrollDirection, 
bool reverse, 
ScrollController controller, 
bool primary, 
ScrollPhysics physics, 
bool shrinkWrap, 
EdgeInsetsGeometry padding, 
double itemExtent, 
Widget Function(BuildContext, int) itemBuilder, 
int itemCount, 
bool addAutomaticKeepAlives, 
bool addRepaintBoundaries, 
bool addSemanticIndexes, 
double cacheExtent, 
int semanticChildCount, 
DragStartBehavior dragStartBehavior})

Entendamos este concepto con la ayuda de un ejemplo:

Pasos:

• Cree una nueva aplicación flutter.
• Por ahora, elimine el código de main.dart.
• Copie el siguiente código y péguelo en su main.dart.

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
// This widget is the root
// of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "ListView.builder",
        theme: ThemeData(primarySwatch: Colors.green),
        debugShowCheckedModeBanner: false,
        // home : new ListViewBuilder(),  NO Need To Use Unnecessary New Keyword
        home: const ListViewBuilder());
  }
}
 
class ListViewBuilder extends StatelessWidget {
  const ListViewBuilder({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ListView.builder")),
      body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
                leading: const Icon(Icons.list),
                trailing: const Text(
                  "GFG",
                  style: TextStyle(color: Colors.green, fontSize: 15),
                ),
                title: Text("List item $index"));
          }),
    );
  }
}

En el código anterior, tenemos la clase ListViewBuilder, que es una clase sin estado. Devuelve un nuevo Scaffold que consta de appBar y body.

En el cuerpo, tenemos ListView.builder con itemcount 5 y itemBuilder que creará un nuevo widget una y otra vez hasta 5 veces porque tenemos itemCount=5 . Si no usamos itemCount en ListView.builder , obtendremos una lista infinita de elementos, por lo que se recomienda usar itemCount para evitar tales errores. El itemBuilder devuelve ListTile que tiene encabezado, seguimiento y título. Este ListTile se construirá una y otra vez hasta 5 veces.

Producción :

Esta tarea también se puede realizar con la ayuda de ListView , entonces, ¿por qué usamos ListView ? constructor ?

La respuesta a esta pregunta es que podemos hacer la misma tarea con la ayuda de ListView, pero cuando tenemos numerosos elementos (por ejemplo, 10000), entonces es ineficiente crear estos elementos con ListView porque carga todos los elementos de la lista a la vez, pero ListView.builder agiliza esta tarea mediante la creación de diseños para los elementos visibles en la pantalla con la ayuda de itemBuilder y crea lentamente otros diseños/contenedores a medida que el usuario se desplaza.

Ahora, a partir del código anterior de ListView.builder , si queremos crear un total de 8 elementos, simplemente cambie itemCount a 8, y obtendremos 8 elementos en nuestra pantalla.

Producción: