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.
indexIndex 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

Related Posts
Mengganti Icon Launcher di Flutter Untuk Android dan iOS

Mengubah atau mengganti icon launcer di flutter baik untuk Android dan iOS bisa dilakukan dengan sangat mudah. Untuk mengubahnya bisa Read more

package_info : Plugin Flutter untuk Mendapatkan Informasi Paket Aplikasi

Terkadang pada aplikasi yang kita buat perlu menampilkan informasi paket aplikasi yang digunakan. Plugin package_info bisa digunakan baik di Android Read more

Cara Install Flutter di Linux, Windows, Mac OS

Flutter merupakan SDK yang dibuat oleh Google untuk untuk mengembangkan aplikasi mobile native berbasis Android dan iOS. Flutter dapat digunakan Read more

Generate Icon dan Splashscreen untuk Android dan iOS dengan Ionic

Salah satu kemudahan yang ditawarkan ionic untuk develop apps hybrid dengan meng-generate icon dan splash screen secara otomatis. Caranya pun Read more

Tagged : # # #

Leave a Reply

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