import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; import 'package:mc_common_app/models/advertisment_models/ad_details_model.dart'; import 'package:mc_common_app/theme/colors.dart'; class CarouselWithIndicatorDemo extends StatefulWidget { final List vehicleImages; const CarouselWithIndicatorDemo({key, required this.vehicleImages}); @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: widget.vehicleImages .map((item) => Container( margin: EdgeInsets.all(5.0), child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(5.0)), child: Image.network( item.imageUrl!, fit: BoxFit.cover, errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) { return const SizedBox( width: 80, height: 80, child: Icon(Icons.error_outline), ); }, ), ), )) .toList(), carouselController: _controller, options: CarouselOptions( autoPlay: false, enlargeCenterPage: false, aspectRatio: 1.8, onPageChanged: (index, reason) { setState(() { _current = index; }); }), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: widget.vehicleImages.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(), ), ]); } }