Untuk membuat carousel (slider gambar) pada Flutter, Anda dapat menggunakan paket atau library pihak ketiga yang disebut “carousel_slider”. Paket ini menyederhanakan pembuatan carousel dalam aplikasi Flutter Anda. Berikut adalah langkah-langkah untuk membuat carousel menggunakan paket “carousel_slider”:
- Tambahkan
carousel_slider
ke filepubspec.yaml
:
Buka file pubspec.yaml
dan tambahkan carousel_slider
ke dalam daftar dependencies:
dependencies:
flutter:
sdk: flutter
carousel_slider: ^4.0.0
Kemudian, jalankan flutter pub get
untuk mengambil paket baru ini.
2. Import library carousel_slider
ke dalam file Dart Anda:
import ‘package:carousel_slider/carousel_slider.dart’;
3. Buat widget CarouselSlider dalam tampilan Anda. Berikut adalah contoh lengkap:
import ‘package:flutter/material.dart’;
import ‘package:carousel_slider/carousel_slider.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CarouselDemo(),
);
}
}
class CarouselDemo extends StatelessWidget {
final List images = [
‘image1.jpg’,
‘image2.jpg’,
‘image3.jpg’,
// Tambahkan gambar lainnya di sini
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Carousel Slider Demo’),
),
body: Center(
child: CarouselSlider(
options: CarouselOptions(
height: 200.0,
aspectRatio: 16/9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
),
items: images.map((image) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber,
),
child: Image.asset(
‘assets/$image’,
fit: BoxFit.cover,
),
);
},
);
}).toList(),
),
),
);
}
}
Pastikan Anda telah memasukkan gambar-gambar tersebut ke dalam folder ‘assets’ dan telah memperbarui pubspec.yaml
untuk merujuk pada gambar-gambar tersebut.
Dalam contoh di atas, kami menggunakan CarouselSlider
untuk membuat carousel dengan beberapa opsi yang dapat disesuaikan sesuai kebutuhan Anda. Anda dapat mengganti gambar-gambar di dalam list images
dengan gambar-gambar Anda sendiri.
Selain paket “carousel_slider,” ada beberapa paket lain yang juga dapat digunakan untuk membuat carousel di Flutter, seperti “flutter_swiper” dan “flutter_carousel_pro.” Pilihlah yang paling sesuai dengan kebutuhan dan preferensi Anda.