[Flutter][34] Membuat Carousel Slider

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Monday, 15 Jul 2019

Hello world,

Kalau kita lihat pada aplikasi-aplikasi toko online, kita sering menemukan aplikasi-aplikasi tersebut yang di halaman utamanya memiliki slider atau carousel. Penggunaannya sama seperti pada slider website. Biasanya dipakai untuk menampilkan konten-konten yang diunggulkan atau promo. Meskipun di dalam flutter sudah ada horizontal listView tetap saja carousel memiliki fungsi dan kelebihan tersendiri dalam membuat sebuah aplikasi. 

Instalasi

1. tambahkan carousel_slider: ^1.3.0 (cek versi terbarunya) dalam pubspec.yaml. 

2. import kode berikut pada file .dart yang akan diisi dengan carousel

import 'package:carousel_slider/carousel_slider.dart';

Selanjutnya kodenya kira-kira akan menjadi seperti berikut:

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() {
runApp(new MaterialApp(
title: "My Carousell",
home: new Halamancarousell(),
));
}

class Halamancarousell extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Carousel"),
),
body: Container(
child : Text("carousel")
),
);
}
}

Selanjutnya kita tambahkan carousel-nya seperti contoh di bawah ini.

CarouselSlider(
  height: 400.0,
  items: [1,2,3,4,5].map((i) {
    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: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)

Pada contoh di atas kita membuat carousel yang memiliki 5 items. Dimana setiap itemnya berisi angka 1 sampai 5 (nantinya akan kita buat versi yang pakai gambar). Setelah dijalankan maka hasilnya akan menjadi seperti gambar di bawah ini.


Selanjutnya kita bisa memodifikasi kode di atas dengan parameter-parameter yang telah disediakan oleh flutter sebagai berikut.

CarouselSlider(
   items: items,
   height: 400,
   aspectRatio: 16/9,
   viewportFraction: 0.8,
   initialPage: 0,
   enableInfiniteScroll: true,
   reverse: false,
   autoPlay: true,
   autoPlayInterval: Duration(seconds: 3),
   autoPlayAnimationDuration: Duration(milliseconds: 800),
   pauseAutoPlayOnTouch: Duration(seconds: 10),
   enlargeCenterPage: true,
   scrollDirection: Axis.horizontal,
 )

Yang menarik di sini ada reverse dimana jika kita isi dengan 'true' maka carousel akan bergerak ke arah kanan. lalu ada scrollDirection yang dapat diisi dengan pilihan horizontal atau vertical. Lalu ada autoPlay yang bisa kita atur sesuai keinginan mulai dari status, durasi dan lain-lain. Selain itu di sini ada enlargeCenterPage yang membuat slider yang sedang aktif (tengah) akan berukuran lebih besar dari sebelah kanan dan kirinya. Contohnya bisa dilihat pada gambar di bawah.



Selanjutnya kita akan mengubah isi dari carousel menjadi gambar. Opsi pertama kita bisa gunakan widget Image (contohnya bisa dilihat di sini). Pertama kita ubah isi dari items menjadi assets url. Lalu memasukkan widget image ke dalam builder.

          items: [
"https://via.placeholder.com/400/0000FF/808080",
"https://via.placeholder.com/400/FF0000/FFFFFF",
"https://via.placeholder.com/400/FFFF00/000000",
].map((i) {
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(image: NetworkImage(i),)
);
},
);
}).toList(),

Opsi ke dua kita bisa menggunakan BoxDecoration pada container (contohnya bisa dilihat di sini).

        items: [
"https://via.placeholder.com/400/0000FF/808080",
"https://via.placeholder.com/400/FF0000/FFFFFF",
"https://via.placeholder.com/400/FFFF00/000000",
].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(i),
fit: BoxFit.cover
),
),
child: Text("Carousel")
);
},
);
}).toList(),


Selamat mencoba :)