Flutter – Desplazarse por la lista de instantáneas

El paquete scroll_snap_list proporciona un contenedor que envuelve el widget ListView.builder para habilitar el evento de ajuste en los elementos de la lista. Se puede modificar a ajuste horizontal o vertical según los requisitos. También es importante tener en cuenta que no utiliza menos o ninguna animación.

En este artículo, veremos las propiedades de Scroll Snap List y su implementación a través de una aplicación simple.

Propiedades clave de Scroll Snap List:

• tecla: Se utiliza para llamar a ScrollSnapListState
• listViewKey: contiene las claves de ListView dentro de ScrollSnapListState
• curva: se usa para configurar la animación de la curva durante el evento de ajuste
• duración: establece la duración de la animación
• margen: Establece el margen del contenedor
• itemCount: Representa el número de elementos de la lista
• onItemFocus: envía una devolución de llamada cuando un elemento se ajusta o se enfoca
• reverse: Se usa para revertir el ListView
• scrollDirection: establece la dirección de desplazamiento para ListView
• dynamicItemOpacity: establece la opacidad de los elementos que no están enfocados

Ahora, implementemos Scroll Snap List a través de una aplicación simple. Para construir la aplicación, siga los pasos a continuación:

• Agregue la dependencia al archivo pubspec.yaml
• Importe la dependencia al archivo main.dart
• Crear la raíz de la aplicación.
• Extender la raíz a una página principal de tipo
• Implementar la lista de complementos de desplazamiento
• Agregar elementos a ListView

Ahora veamos los pasos en detalle.

Agregar la dependencia:

Para agregar la dependencia scroll_snap_list al archivo pubspec.yaml , siga la imagen a continuación:

Importación de la dependencia:

Use la siguiente línea de código para importar la dependencia al archivo main.dart:

import 'package:scroll_snap_list/scroll_snap_list.dart';

Creación de la raíz de la aplicación:

La raíz de la aplicación se puede crear mediante la creación de una Clase (por ejemplo, HorizontalListDemo) que se extiende a un StatelessWidget como se muestra a continuación:

class HorizontalListDemo extends StatefulWidget {
  @override
  _HorizontalListDemoState createState() => _HorizontalListDemoState();
}

Extendiendo la raíz:

Ahora que se estableció la raíz de la aplicación, ahora podemos crear otra clase (por ejemplo, _HorizontalListDemoState) que se extiende al estado del elemento de la lista:

class _HorizontalListDemoState extends State<HorizontalListDemo> {
  List<int> data = [];
  int _focusedIndex = 0;
  
  @override
  void initState() {
    super.initState();
  
    for (int i = 0; i < 30; i++) {
      data.add(Random().nextInt(100) + 1);
    }
  }
  
  void _onItemFocus(int index) {
    setState(() {
      _focusedIndex = index;
    });
  }
  }

Implementación de la lista de instantáneas de desplazamiento:

Para implementar Scroll Snap List, use la siguiente línea de códigos y modifíquela según sus necesidades:

ScrollSnapList(
  onItemFocus: _onItemFocus,
  itemSize: 50,
  itemBuilder: _buildListItem,
  itemCount: data.length,
  key: sslKey,
  scrollDirection: Axis.vertical,
)

Agregar los elementos:

En su método buildItem , llame al método focusToItem como se muestra a continuación:

Widget _buildListItem(BuildContext context, int index) {
  //horizontal
  return Container(
    height: 50,
    child: Material(
      color: _focusedIndex == index ? Colors.lightBlueAccent : Colors.white,
      child: InkWell(
        child: Text("Index: $index | Value: ${data[index]}"),
        onTap: () {
          print("Add a statement here");
  
          //trigger
          sslKey.currentState.focusToItem(index);
        },
      ),
    ),
  );
}

Código fuente completo:

import 'dart:math';
  
import 'package:flutter/material.dart';
import 'package:scroll_snap_list/scroll_snap_list.dart';
  
void main() => runApp(HorizontalListDemo());
  
// root of the application
class HorizontalListDemo extends StatefulWidget {
  @override
  _HorizontalListDemoState createState() => _HorizontalListDemoState();
}
  
class _HorizontalListDemoState extends State<HorizontalListDemo> {
  List<int> data = [];
  int _focusedIndex = 0;
  
  @override
  void initState() {
    super.initState();
  
    for (int i = 0; i < 30; i++) {
      data.add(Random().nextInt(100) + 1);
    }
  }
  
  void _onItemFocus(int index) {
    setState(() {
      _focusedIndex = index;
    });
  }
  
  Widget _buildItemDetail() {
    if (data.length > _focusedIndex)
      return Container(
        height: 150,
        child: Text("index $_focusedIndex: ${data[_focusedIndex]}"),
      );
  
    return Container(
      height: 150,
      child: Text("No Data"),
    );
  }
  
  Widget _buildListItem(BuildContext context, int index) {
    //horizontal
    return Container(
      width: 35,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Container(
            height: data[index].toDouble()*2,
            width: 25,
            color: Colors.green,
            child: Text("$index\n${data[index]}"),
          )
        ],
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal List',
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Colors.green,
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: ScrollSnapList(
                  onItemFocus: _onItemFocus,
                  itemSize: 35,
                  itemBuilder: _buildListItem,
                  itemCount: data.length,
                  reverse: true,
                ),
              ),
              _buildItemDetail(),
            ],
          ),
        ),
      ),
    );
  }
}

Producción: