Flutter – Lista agrupada

El paquete grouped_list en Flutter, como sugiere el nombre, se usa para crear elementos de lista en diferentes grupos. Este paquete también proporciona 3 funciones específicas que se enumeran a continuación:

1. Los elementos de la lista se pueden separar en grupos.
2. Se puede dar un encabezado individual a cada grupo.
3. La mayoría de los campos de ListView.builder están disponibles en esta biblioteca

Se puede crear una lista agrupada de la siguiente manera usando este paquete:

Syntax:
   GroupedListView<dynamic, String>(
    elements: _elements,
    groupBy: (element) => element['group'],
    groupSeparatorBuilder: (String groupByValue) => Text(groupByValue),
    itemBuilder: (context, dynamic element) => Text(element['name']),
    itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']),
    useStickyGroupSeparators: true,
    floatingHeader: true,
    order: GroupedListOrder.ASC,
  ),

Parámetros clave:

La siguiente lista contiene todos los parámetros de GroupedListView con su explicación:

• elemento: Comprende el contenido que se va a mostrar en la lista. Es un campo obligatorio.
• groupBy: El contenido y los grupos se mapean utilizando esta función. Es un campo obligatorio.
• itemBuilder / indexedItemBuilder:  Funciona el widget que define el contenido de la aplicación.
• separador: este widget separa el contenido de un grupo de otro.
• orden: Establece el orden en que se muestra la lista agrupada.

Ahora implementemos lo mismo en el siguiente ejemplo.

Ejemplo:

Agregue la biblioteca grouped_list en la sección de dependencias del archivo pubspec.yaml como se muestra a continuación:

Ahora importe la dependencia al archivo de código usando la siguiente línea de código:

import 'package:grouped_list/grouped_list.dart';

Ahora es el momento de definir los elementos de la lista. En este ejemplo agregaremos los siguientes elementos:

List _elements = [
  {'name': 'Virat Kohli', 'group': 'RCB'},
  {'name': 'Rohit Sharma', 'group': 'MI'},
  {'name': 'AB de Villiers', 'group': 'RCB'},
  {'name': 'Jasprit Bumrah', 'group': 'MI'},
  {'name': 'KL Rahul', 'group': 'KXIP'},
  {'name': 'Md. Shammi', 'group': 'KXIP'},
];

Ahora estructure la aplicación extendiendo StatelessWidget y llame al método GroupedListView como se muestra a continuación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element['group'],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1['name'].compareTo(item2['name']),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true,
          groupSeparatorBuilder: (String value) => Padding(
              ),
            );
          },
        ),
      ),
    );
  }
}

Ahora diseñe la interfaz de usuario para la lista como desee. En aras de la simplicidad, utilizaremos el ItemBuilder de la siguiente manera:

itemBuilder: (c, element) {
  return Card(
    elevation: 8.0,
    margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
    child: Container(
      child: ListTile(
        contentPadding:
        EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: ImageIcon(
          NetworkImage('http://www.pngall.com/wp-content/uploads/2017/04/IPL-Logo-2017-PNG.png')
        ),
        title: Text(element['name']),
      ),
    ),
  );
},

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';
 
void main() => runApp(MyApp());
 
List _elements = [
  {'name': 'Virat Kohli', 'group': 'RCB'},
  {'name': 'Rohit Sharma', 'group': 'MI'},
  {'name': 'AB de Villiers', 'group': 'RCB'},
  {'name': 'Jasprit Bumrah', 'group': 'MI'},
  {'name': 'KL Rahul', 'group': 'KXIP'},
  {'name': 'Md. Shammi', 'group': 'KXIP'},
];
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element['group'],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1['name'].compareTo(item2['name']),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              value,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                  EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: ImageIcon(
                    NetworkImage('http://www.pngall.com/wp-content/uploads/2017/04/IPL-Logo-2017-PNG.png')
                  ),
                  title: Text(element['name']),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Producción: