Flutter menawarkan lebih dari satu pilihan package untuk membuat image / layout slider yang bisa diimplementasikan di android dan iOS. Flutter swiper merupakan salah satu package tersebut. Implementasinya pun cukup mudah. Kelebihannya, karena slider yang dibuat bukan hanya untuk image tapi juga layout atau widget lain.
Instalasi
Instalasinya sama seperti package flutter lain, yaitu dengan menambahkan pada file pubspec.yaml berupa :
1 | flutter_swiper : ^lastest_version |
Tambahkan import package pada file flutter yang ingin menggunakan :
import ‘package:flutter_swiper/flutter_swiper.dart’;
Lalu pada flutter anda dapat tambahkan widget swipper, seperti :
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Swiper(
itemBuilder: (BuildContext context,int index){
return new Image.network("http://urlkamu.com/image.png",fit: BoxFit.fill,);
},
itemCount: 3,
pagination: new SwiperPagination(),
control: new SwiperControl(),
),
);
}
Berikut penjelasan sejumlah konstruktor yang dibawa oleh flutter swiper :
| Parameter | Default | Description | ||
|---|---|---|---|---|
| scrollDirection | Axis.horizontal | If
| ||
| loop | true | Set to
| ||
| index | Index number of initial slide. | |||
| autoplay | false | Set to
| ||
| onIndexChanged | void onIndexChanged(int index) | Called with the new index when the user swiped or autoplay | ||
| onTap | void onTap(int index) | Called when user tap ui. | ||
| duration | 300.0 | The milliscends of every transaction animation costs | ||
| pagination | null | set
| ||
| control | null | set
|
Selain juga ada beberapa parameter lain seperti pagination, control button. Untuk animasi layoutnya pun bisa dipilih antara default, Stack, atau Tinder.
Untuk lebih jelasnya bisa meluncur ke https://pub.dev/packages/flutter_swiper