Nouveau Widget CarousselView

Flutter
1

Bonjour à tous,

Je viens de remplacer le caroussel de mon application par le widget officiel de Flutter mais je le trouve pas encore assez personnalisable. Plusieurs de mes utilisateurs préfèrent avoir les smooth indicators en bas et pour le mettre en place, j’utilise encore une dépendance externe et il faut que je récupère la position de l’index du caroussel. Et pour l’instant, je n’y arrive pas … Quelqu’un aurait la solution ?

J’ai bien essayé en utilisant le controller mais je ne vois pas quel méthode utilisée …

Merci d’avance pour votre aide :slight_smile:

Voici mon code :

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

class DetailImageSliderWidget extends StatefulWidget {
  final List<String> posterPathList;
  const DetailImageSliderWidget({required this.posterPathList, super.key});

  @override
  State<DetailImageSliderWidget> createState() =>
      _DetailImageSliderWidgetState();
}

class _DetailImageSliderWidgetState extends State<DetailImageSliderWidget> {
  final CarouselController _controller = CarouselController();
  List<String> _posterPathList = [];

  @override
  void initState() {
    _posterPathList = widget.posterPathList;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      child: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: [
          CarouselView(
            // La largeur que les enfants sont obligés d'avoir.
            itemExtent: MediaQuery.sizeOf(context).width - 40,
            // Largeur minimale autorisée pour les éléments du carrousel pendant les transitions de défilement.
            shrinkExtent: 200,
            // L'espace qui entoure chaque élément du carrousel.
            padding: const EdgeInsets.all(8),
            // La forme du matériau de chaque élément du carrousel (par défaut 28.0).
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            // Si le carrousel doit continuer à défiler vers les éléments suivants/précédents pour conserver la disposition d'origine.
            itemSnapping: true,
            // La coordonnée z de chaque élément du carrousel.
            elevation: 4,
            // Le contrôleur du carrousel.
            controller: _controller,
            // Les enfants du carrousel
            children: List.generate(_posterPathList.length, (int index) {
              final poster = _posterPathList[index];
              return imageSlider(poster, index);
            }),
            // La direction dans laquelle le carrousel doit défiler.
            //scrollDirection: Axis.horizontal,
            //La couleur d'arrière-plan de chaque élément du carrousel.
            //backgroundColor: Colors.black,
          ),
          Padding(
            padding: const EdgeInsets.all(20),
            child: buildIndicator(),
          )
        ],
      ),
    );
  }

  Widget imageSlider(String posterImage, int index) =>
      Image.network(posterImage, fit: BoxFit.cover, loadingBuilder:
          (BuildContext context, Widget child,
              ImageChunkEvent? loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }
        return Center(
          child: CircularProgressIndicator(
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes!
                : null,
          ),
        );
      });

  Widget buildIndicator() => AnimatedSmoothIndicator(
        activeIndex: 1, // C'est ici que je dois indiquer la postion de mon index !!
        count: _posterPathList.length,
        effect: const WormEffect(
          dotWidth: 10,
          dotHeight: 10,
          activeDotColor: Colors.orange,
          dotColor: Colors.white,
        ),
      );
}

Et le rendu final :

image