Flutter – Lista horizontal

En Flutter puede haber dos tipos de listas, a saber, lista horizontal y lista vertical. Ambas listas se crean utilizando el constructor ListView y asignando el parámetro scrollDirection . De forma predeterminada, el parámetro de dirección de desplazamiento es vertical para una lista vertical, pero se puede anular pasándole un parámetro horizontal.

Constructor de ListView utilizado aquí:

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}
)

Clave de propiedad del widget ListView:

• childrenDelegate: esta propiedad toma la clase SliverChildDelegate como objeto. Proporciona un delegado de niños para Listview.
• itemExtent: la propiedad itemExtent toma un valor doble como objeto para establecer la extensión del área desplazable para ListView.

En este artículo, analizaremos el proceso de creación de una lista horizontal. Con el mismo propósito, diseñaremos una aplicación sencilla que muestre una lista de imágenes de superhéroes en una dirección horizontal. Para ello tendremos que seguir los siguientes pasos:

• Cree un widget sin estado (por ejemplo, Myapp)
• Agregue un widget de andamio para contener los contenedores
• Agregue un contenedor que contenga las imágenes dentro de un constructor ListView

Es importante tener en cuenta que todas las imágenes utilizadas en la aplicación se almacenarán en la carpeta de activos/imágenes como se muestra a continuación:

Además, la dependencia de activos debe indicarse en el archivo pubspec.yaml como se muestra a continuación:

Ahora veámoslos en detalle.

Crear un widget sin estado:

Para crear un widget con estado que proporcione una estructura base a la aplicación, use el siguiente código:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp()

Agregar el widget de andamio:

Para agregar un widget de andamio dentro de statelessWidget, use la siguiente técnica:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        )

Creando ListView con contenedores:

Se puede crear un ListView simple con contenedores de la siguiente manera:

ListView(
           scrollDirection: Axis.horizontal,
           children: <Widget>[
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/aquaman.png'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/greenlantern.webp'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 240.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/batman.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/superman.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
             Container(
               height: 480.0,
               width: 240.0,
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(
                       'assets/images/wonderwomen.jpg'),
                   fit: BoxFit.fill,
                 ),
                 shape: BoxShape.rectangle,
               ),
             ),
           ],
 
         ),

Ahora que hemos diseñado todos los componentes esenciales de la aplicación, es hora de integrarlos en una aplicación completa de la siguiente manera:

Código fuente completo:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Colors.green,
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 550.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/aquaman.png'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/greenlantern.webp'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 240.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/batman.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/superman.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
              Container(
                height: 480.0,
                width: 240.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/images/wonderwomen.jpg'),
                    fit: BoxFit.fill,
                  ),
                  shape: BoxShape.rectangle,
                ),
              ),
            ],
 
          ),
        ),
      ),
    );
  }
}

Producción: