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 :

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 :


class _MyHomePageState extends State<MyHomePage> {

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

ParameterDefaultDescription
scrollDirectionAxis.horizontalIf 
Axis.horizontal
, the scroll view’s children are arranged horizontally in a row instead of vertically in a column.
looptrueSet to 
false
 to disable continuous loop mode.
index0Index number of initial slide.
autoplayfalseSet to 
true
 enable auto play mode.
onIndexChangedvoid onIndexChanged(int index)Called with the new index when the user swiped or autoplay
onTapvoid onTap(int index)Called when user tap ui.
duration300.0The milliscends of every transaction animation costs
paginationnullset 
new SwiperPagination()
 to show default pagination
controlnullset 
new SwiperControl()
 to show default control buttons

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

Tagged : # # #

Leave a Reply

Your email address will not be published. Required fields are marked *