OnBoarding Scren atau Introduction Scren

Hai semua....

Back lagi bareng aku, Di blog kali ini kita akan bahas tentang onboarding screen atau introduction screen. sebelum kita masuk lebih jauh alangkah baiknya kitaa mengetahui terlebih dulu apa sih yang dimaksu dengan onboarding?

Jadi Onboarding screen atau introduction screen adalah salah satu komponen dalam proses onboarding yang ditampilkan kepada pengguna baru saat mereka pertama kali membuka aplikasi. Onboarding screen biasanya berupa tampilan layar penuh yang memberikan pengenalan singkat tentang aplikasi, tujuan, fitur, atau panduan penggunaan.

Tujuan utama dari onboarding screen adalah untuk memberikan pengguna gambaran umum tentang aplikasi dan membantu mereka memahami cara kerjanya. Beberapa poin penting yang biasanya disampaikan melalui onboarding screen adalah:

1. Pesan selamat datang

2. Penjelasan tentang aplikasi

3. Fitur utama

4. Panduan pengguna

5. Tombol tindakan

Hal yang pertama kita lakukan dalam membuat onboarding pada flutter  adalah menyediakan proyeknya terlebih dahulu, kemudian kunjungi sebuah situs untuk melakukan penginstalan/penambahan dependency dalam sebuah file.yaml.

Selanjutnya kita masukkan sebuah kode program pada screen pertama, namun sebelum itu kita buat classnya menggunakan stateful, lalu return nya kita ganti dengan introduction screen. Tambahkan title, disini title saya hanya menyalinnya melalui website peb.dev.

Kemudian kita warnakan bagroundnya dengan putih dan tambahkan sebuah image. Untuk menambahkan image ada dua cara yang pertama menggunakan image.network dimana ini akan kita salin sebuah url dari gambar. Kemudian yang kedua kita adalah dengan menggunakan assets image. Assets image sendiri itu memanggil sebuah gambar yang sudah terdaftar pada file .yaml. Karena kita akan membuat tiga screen jadi salin saja screen sebelumnya dan ganti kode untuk teks dan gambar. lalu kita tambahkan sebuah kode setelahnya yaitu kode tombol untuk, skip, next, done, dan back button.

Gambar tombol getstarted

Gambar dots

Dan berikut outputnya:

Mungkin untuk kali ini pembahasannya sampai disini dulu yah.

byeeeee........

Subscribe to receive free email updates: