Flutter – Deslizador de carrusel

Carrusel Slider es uno de los controles deslizantes de imágenes más populares utilizados hoy en día en la mayoría de las aplicaciones. Estos controles deslizantes de carrusel se ven principalmente en varios sitios de comercio electrónico como Amazon, Flipkart, Myntra y muchos más. Mostrar las imágenes en un control deslizante brinda una experiencia de usuario atractiva. Como estos controles deslizantes están automatizados, puede ver varios tipos de imágenes y contenido en ellos. 

Propiedades del carrusel deslizante:

• Elementos: en los que tenemos que declarar imágenes de activos o imágenes de red que se utilizan en nuestra aplicación
• Opciones: Consta de muchas propiedades como:

1. altura: altura total de la tarjeta para mostrar la imagen
2. reproducción automática: las cartas se deslizan automáticamente a la vez
3. autoplaycurve: determina la curva de animación
4. aspectRatio: la relación de aspecto se utiliza para declarar la altura
5. autoPlayAnimationDuration: se usa para declarar el tiempo para la diapositiva automatizada

En este artículo, analizaremos la implementación de Carousel Slider en una aplicación Flutter. Para Implementar el Carrusel Slider en Flutter tienes que seguir los siguientes pasos:

Paso 1: Primero agregue la dependencia de Carousel Slider en el archivo pubspec.yaml en la carpeta lib

Hemos agregado la dependencia para Carousel Slider en nuestro archivo pubspec.yaml ubicado en la carpeta lib en dependencias como se muestra a continuación:

dependencies:
  
    carousel_slider: ^2.3.1

Ahora haga clic en pub.get para configurar.

Paso 2: ahora navegue hasta el archivo main.dart() y devuelva Material App(). 

Primero, hemos declarado MyApp() en runApp en la función principal. Luego hemos creado StatelessWidget para MyApp en el que hemos devuelto MaterialApp(). En esta MaterialApp() le hemos dado el título a nuestra aplicación y luego declarado el tema de nuestra aplicación como tema oscuro. Luego le hemos dado nuestra primera pantalla o aplicación deslizante en el hogar: HomePage()

void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        
      // Title of App
      title: 'GFG slider',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
        
      //First Screen of Slider App
      home: HomePage(),
    );
  }
}

Paso 3: ahora importe las dependencias del control deslizante del carrusel en el archivo HomePage.dart().

En HomePage.dart() primero tenemos que importar nuestro paquete carousel-slider.dart. Luego hemos creado la barra de aplicaciones dentro de Scaffold(). En esta barra de aplicaciones le hemos dado el título de la aplicación. Después. Dentro del cuerpo, hemos declarado ListView() dentro del cual hemos declarado CarouselSlider() en el que hemos dado 5 elementos. Cada elemento se coloca dentro de un contenedor() que consta de propiedades como el margen que se proporciona desde todos los lados. Después de eso, hemos dado boxdecoration que se usa para decorar nuestro Container(). Hemos dado boderRadiuscomo circular. Lo que hace que nuestro Container() sea redondeado desde todos los lados dando un radio específico. Ahora hemos dado una imagen en la que hemos declarado DecorationImage() que se usa para mostrar imágenes en nuestro Container() a través de URL. Y he ajustado la imagen como BoxFit.cover. Que ajustan la imagen como tamaño del contenedor. Ahora para los otros 4 contenedores, hemos seguido los mismos pasos. Después de eso, hemos declarado CarouselOptions() en opciones

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
  
  
class  HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GFG Slider"),
      ),
      body: ListView(
        children: [
          CarouselSlider(
              items: [
                  
                //1st Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //2nd Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //3rd Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //4th Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                  
                //5th Image of Slider
                Container(
                  margin: EdgeInsets.all(6.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                    image: DecorationImage(
                      image: NetworkImage("ADD IMAGE URL HERE"),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
  
          ],
              
            //Slider Container properties
              options: CarouselOptions(
                height: 180.0,
                enlargeCenterPage: true,
                autoPlay: true,
                aspectRatio: 16 / 9,
                autoPlayCurve: Curves.fastOutSlowIn,
                enableInfiniteScroll: true,
                autoPlayAnimationDuration: Duration(milliseconds: 800),
                viewportFraction: 0.8,
              ),
          ),
        ],
      ),
  
    );
  }
}

Producción: