Home Mobile Cara membuat carousel pada flutter

Cara membuat carousel pada flutter

0

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”:

  1. Tambahkan carousel_slider ke file pubspec.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.