Halo teman-teman, pada kesempatan ini kita akan membuat sebuah OnBoarding Screen yang ada di Flutter. Disini kita akan menggunakan liquid_swipe sebagai library dan Menggunakan nya di dalam Aplikasi. Jadi mari kita mulai.
Langkah pertama kita copy dependencies Liquid Swipe 2.1.1 yang bisa kita ambil dari pub.dev , selanjutnya mari kita pastekan pada bagian Pubspec.yaml
kemudian buat folder dengan nama images, kemudian aktifkan assets di pubspec.yaml
setelah itu silahkan pub get setelah selesai,
Langkah kedua buat sebuah dua file di dalam folder bernama onBoarding dan model_board seperti berikut :
model_board disini bergunakan uhntuk menampung image dan text dari onboarding yang akan ditampilkan.
perhatikan bahwa pembuatan folder tersebut tidaklah wajib hal ini saya lakukan supaya aplikasi yang saya buat, lebih rapi dan tidak membuat bingung tim yang mendevelop aplikasi bersama kita. selanjutanya mari kita masuk kedalam file onBoarding.dart tersebut .
pertama sebelum kita import Liquid Swipe kita perlu terlebih untuk import material.dart kedalam file aplikasi.
bagi teman-teman ingin source code nya, bisa klik link dibawah ini
fhrl-rz/OnBoarding-Screen-with-Animation-Liquid_Swipe-2.1.1 (github.com)
Baru setelahnya kita buat sebuah class stateful. lalu kita buat sebuah list page seperti berikut :
karena kita akan membuat sebuah onBoarding dimana kita membutuhkan 4 page untuk membuatnya maka kita menampungnya dengan sebuah list.
lalu pada body barulah kita panggil Liquid Swipe seperti berikut :
kemudian kita akan mengedit file mode_board.dart berikut codingannya:
berikut hasil nya: