import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:mc_common_app/classes/consts.dart'; import 'package:mc_common_app/theme/colors.dart'; class CarouselWithIndicatorDemo extends StatefulWidget { const CarouselWithIndicatorDemo({super.key}); @override State createState() => _CarouselWithIndicatorState(); } class _CarouselWithIndicatorState extends State { int _current = 0; final CarouselController _controller = CarouselController(); final imgList = [ MyAssets.bnCar, MyAssets.bnCar, MyAssets.bnCar, ]; @override Widget build(BuildContext context) { return Column(children: [ CarouselSlider( items: imgList .map((item) => Container( margin: EdgeInsets.all(5.0), child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(5.0)), child: Image.asset(item, fit: BoxFit.cover), ), )) .toList(), carouselController: _controller, options: CarouselOptions( autoPlay: false, enlargeCenterPage: false, aspectRatio: 1.8, onPageChanged: (index, reason) { setState(() { _current = index; }); }), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: imgList.asMap().entries.map((entry) { return GestureDetector( onTap: () => _controller.animateToPage(entry.key), child: Container( width: 12.0, height: 12.0, margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0), decoration: BoxDecoration( shape: BoxShape.circle, color: _current == entry.key ? MyColors.darkPrimaryColor : MyColors.lightTextColor.withOpacity(0.5), ), ), ); }).toList(), ), ]); } }