Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Carousel Slider in Flutter. Carousel Slider adalah sebuah widget pada flutter yang digunakan untuk menampilkan gambari dalam bentuk slide yang dapat digeser secara manual atau auto play. 

Step 1. Tambahkan Dependencies 

Tambahkan https://pub.dev/packages/carousel_slider/install pada pubspec.yml

dependencies:   flutter:     sdk: flutter   carousel_slider: ^4.0.0

Step 2. Tambahkan List Image

Tambahkan imgList dengan menambahkan code seperti berikut 

List imgList = [     ‘https://static01.nyt.com/images/2015/10/24/opinion/24manguel/24manguel-superJumbo.jpg’,     ‘https://library.stiesia.ac.id/wp-content/uploads/2021/04/photo-1507842217343-583bb7270b66.jpg’,     ‘https://media.istockphoto.com/photos/wooden-bookshelves-filled-with-books-picture-id1265077901?b=1&k=20&m=1265077901&s=170667a&w=0&h=LBfpUBQC8lwaURRu_3N5H9OQKmKo8kXddLSVCtqJrgc=’   ];

Step 3. Tambahkan Function List

Tambahkan function list seperti berikut

List<T> map<T>(List list, Function handler) {     List<T> result = [];     for (var i = 0; i < list.length; i++) {       result.add(handler(i, list[i]));     }     return result;   }

Step 4. Buat Carousle Slider

Buat carousle slider dengan menambahkan code seperti berikut 

CarouselSlider(                       options: CarouselOptions(                           autoPlay: true,                           autoPlayInterval: Duration(seconds: 3),                           autoPlayAnimationDuration:                               Duration(milliseconds: 800),                           autoPlayCurve: Curves.fastOutSlowIn,                           pauseAutoPlayOnTouch: true,                           enlargeCenterPage: true,                           viewportFraction: 0.8,                           scrollDirection: Axis.horizontal,                           onPageChanged: (index, reason) {                             setState(() {                               _currentIndex = index;                             });                           }),                       items: imgList.map((imgUrl) {                         return Builder(                           builder: (BuildContext context) {                             return Container(                               width: MediaQuery.of(context).size.width,                               height: MediaQuery.of(context).size.height,                               child: Image.network(                                 imgUrl,                                 fit: BoxFit.contain,                                 height: 180.0,                                 width: 180.0,                               ),                             );                           },                         );                       }).toList(),                     ),

Hasil Run : 

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂