viernes 22 noviembre 2024

Cómo usar card_swiper en Flutter

El paquete card_swiper es una herramienta popular en Flutter que permite crear carruseles interactivos y personalizables, ideales para mostrar tarjetas, imágenes o contenido desplazable en una interfaz fluida.

¿Qué es `card_swiper` y para qué sirve?

card_swiper es un widget que facilita la creación de carruseles deslizables con múltiples efectos de transición. Es útil para mostrar galerías de imágenes, secciones destacadas, presentaciones de productos y más.

Instalación y configuración

Paso 1: Agregar el paquete

Añade card_swiper a tu archivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  card_swiper: ^2.0.4

Ejecuta el comando:

flutter pub get

Uso básico de `card_swiper`

1. Importar el paquete:

import 'package:card_swiper/card_swiper.dart';

2. Crear un carrusel simple:

Usa el widget Swiper para mostrar un carrusel de tarjetas o imágenes:

import 'package:flutter/material.dart';
   import 'package:card_swiper/card_swiper.dart';

   void main() => runApp(MyApp());

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Ejemplo de card_swiper')),
           body: Swiper(
             itemBuilder: (BuildContext context, int index) {
               return Image.network(
                 'https://picsum.photos/400/300?random=$index',
                 fit: BoxFit.cover,
               );
             },
             itemCount: 5,
             pagination: SwiperPagination(),
             control: SwiperControl(),
           ),
         ),
       );
     }
   }

Personalización del `Swiper`

Parámetros clave

Propiedad	Descripción
`itemCount`	Número total de elementos en el carrusel.
`itemBuilder`	Función que construye cada elemento del carrusel.
`pagination`	Widget para mostrar la paginación (e.g., puntos o indicadores).
`control`	Controles de navegación (flechas de adelante/atrás).
`loop`	Determina si el carrusel se repite en bucle (por defecto es `true`).
`autoplay`	Activa el desplazamiento automático del carrusel.
`scrollDirection`	Dirección del desplazamiento: `Axis.horizontal` o `Axis.vertical`.
`onIndexChanged`	Callback que se activa cuando cambia el índice del carrusel.

Ejemplo: Carrusel con desplazamiento automático

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.blueAccent,
      child: Center(
        child: Text(
          'Tarjeta $index',
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    );
  },
  itemCount: 5,
  autoplay: true,
  loop: true,
  duration: 800,
  pagination: SwiperPagination(
    builder: DotSwiperPaginationBuilder(
      activeColor: Colors.red,
      color: Colors.grey,
    ),
  ),
);

Ejemplo: Carrusel con transición 3D

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return Card(
      child: Center(
        child: Text(
          'Tarjeta $index',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  },
  itemCount: 5,
  layout: SwiperLayout.STACK,
  itemWidth: 300.0,
  itemHeight: 200.0,
);

Métodos útiles en `card_swiper`

Método	Descripción
`SwiperController`	Controla el carrusel de forma programática.
`SwiperPagination.builder`	Personaliza el estilo de los indicadores de paginación.
`SwiperControl`	Agrega botones de control para avanzar o retroceder.

Ejemplo: Control manual del carrusel

final SwiperController controller = SwiperController();

Swiper(
  controller: controller,
  itemCount: 5,
  itemBuilder: (BuildContext context, int index) {
    return Image.network('https://picsum.photos/400/300?random=$index');
  },
);

ElevatedButton(
  onPressed: () {
    controller.next(); // Avanza al siguiente elemento
  },
  child: Text('Siguiente'),
);

Referencias oficiales

Para más detalles y opciones avanzadas, consulta la documentación oficial del paquete card_swiper.

Etiquetas:

dart flutter

Creado por:

Jorge García

Fullstack developer