Jorge SinCodigo
Jorge SinCodigo
Ambassador
ย ยทย Top 0.1% Flutterflow Developer

Carousel Sliders Widget for Images [Scrollabe]

Preview [Capture2.PNG] Widget Name Carouselimageslider ParametersI don't use parameters, but if you know how to set it, you can use dynamics images. Ex.ย  a list of path images. Dependencycarousel_slider: ^4.0.0 (Or the last one)

 Code
import 'package:carousel_slider/carousel_slider.dart';

class Carouselimageslider extends StatefulWidget {
  const Carouselimageslider({
    Key key,
    this.width,
    this.height,
  }) : super(key: key);

  final double width;
  final double height;

  @override
  _CarouselimagesliderState createState() => _CarouselimagesliderState();
}

///sample image, please replace them
final List imageList = [
  "https://www.fedregsadvisor.com/wp-content/uploads/2021/08/%E2%80%98Spider-Man-No-Way-Home-Unofficial-Trailer-Is-Here.jpg", "https://www.quever.news/u/fotografias/m/2021/3/8/f1280x720-7642_139317_6521.jpg",
  "https://images.hdqwalls.com/download/spiderman-peter-parker-standing-on-a-rooftop-ix-1280x720.jpg",
  "https://indiainfo4u.in/wp-content/uploads/2021/03/Spider-Man-No-Way-Home-What-the-Title-Reveals-About-the-MCU-Sequel.jpg",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvUgui-suS8DgaljlONNuhy4vPUsC_UKvxJQ&usqp=CAU",
];

class _CarouselimagesliderState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
    
    
   
          child: CarouselSlider(
            options: CarouselOptions(
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              autoPlay: true,
            ),
            items: imageList.map((e) => ClipRRect(
             borderRadius: BorderRadius.circular(8),
              child: Stack(
                fit: StackFit.expand,
                children: [
                  Image.network(e,
                  width: 1050,
                  height: 350,
                  fit: BoxFit.cover,)
                ],
              ) ,
            )).toList(),
          ),
        
    
    
    );
  }
}  

Resources PubDev Url: https://pub.dev/packages/carousel_slider Observations ๐Ÿ‘‹ Hey dev, If you know how to set images as parameter, share it below

2
10 replies