Carousel Slider in Flutter

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 🙂

Subscribe

Related articles

Panduan Migrasi Database di Laravel

Pendahuluan Migrasi database adalah salah satu fitur penting di Laravel...

Penggunaan Machine Learning dalam Pengembangan Web

Machine learning (ML) adalah cabang dari kecerdasan buatan (AI)...

Mengenal Vue.js: Membuat Antarmuka Pengguna yang Dinamis

Vue.js adalah salah satu framework JavaScript yang populer digunakan...

Keamanan Aplikasi Web: Mengamankan Aplikasi Laravel Anda

Keamanan aplikasi web adalah aspek kritis yang harus diperhatikan...

Membangun API dengan Laravel: Best Practices

Laravel adalah framework PHP yang sangat populer untuk membangun...

LEAVE A REPLY

Please enter your comment!
Please enter your name here