#30 Tutorial Flutter Membuat On Boarding Keren

Salam Teman Koding, pada tutorial Flutter Bahasa Indonesia yang ke-30 kali ini kita akan membuat On Boarding Screen yang mantap-mantap. Kita tidak akan menggunakan Library untuk membuat On Boarding Flutter, kita akan membuatnya dari scretch atau membuat custom on boarding sendiri.

Pada tutorial ini akan kita pelajari mengenai animasi dan gradient Flutter yang ciamik buat kamu yang ingin membuat On Boarding atau Tour Guide untuk aplikasi Flutter mu. Oh ya kode Flutter yang akan kita tulis kali ini juga kalian bisa custom sesuai dengan kebutuhan kamu sekalian. Untuk source kode nanti bisa di download di github saya.

Apa Yang Akan Kita Pelajari

1. Membuat Project Flutter Baru
2. Memulai Koding OnBoarding
3. Kesimpulan

Membuat Project Flutter Baru

Pertama silahkan buat sebuah project Flutter baru apabila kamu belum memiliki project Flutter, buka terminal dan ketikan perintah di bawah ini :

flutter create onboarding

Setelah itu tunggu proses pembuatan project sampai selesai.

Memulai Koding UI Flutter

Setelah kamu berhasil membuat project Flutter baru.

Buka file pubspec.yaml dan ubah menjadi seperti di bawah ini:

name: onboarding
description: A new Flutter project.
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
simple_animations: ^1.3.3
http: ^0.12.1
dev_dependencies:
flutter_test:
sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
assets:
- assets/images/

# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
fonts:
- family: Schyler
fonts:
- asset: assets/fonts/cm_sans_serif_2012.ttf

# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages

Kemudian buat directory dan file sebagai berikut di folder lib

Pertaman buat file onboarding_screen.dart tuliskan kode di bawah ini :

Setelah itu buat file styles.dart dan tuliskan kode di bawah ini :

Terakhir ubah file di main.dart menjadi seperti kode di bawah ini :

Kemudian Run project Flutter yang telah kamu buat dan jika berhasil gambarnya akan seperti gambar di bawah ini :

Kesimpulan

On Boarding atau Tour Guide sangat bermanfaat bagi users karena dengan On Boadring kita bisa memberikan tutorial atau hanya sekedar branding dengan aplikasi produk kita.

Note

Untuk asset dan Font kamu bisa mendownloadnya di project github saya lengkap dengan full source kode nya:

Branch nya = zidni/onboarding kamu harus checkout perintahnya di bawah ini