Pertemuan 4

Notification, Navigation Route, Passing

Data dan Custom Widget
Adib, S.T, M.Kom
Notification Widget
(Toast)
 Toast

Toast adalah salah satu Widget yang digunakan untuk menampilkan pesan berupa
Text, yang terlintas setelah pengguna melakukan aksi tertentu.

Untuk membuat toast pada flutter dapat menggunakan Fluttertoast. Fluttertoast

digunakan untuk membuat pesan toast hanya dengan menulis satu baris kode.
Properties pada Fluttertoast adalah :
msg: pesan toast.
toastLength: Durasi toast
backgroundColor: Warna latar yang akan ditampilkan.
textColor: Warna teks yang akan ditampilkan.
fontSize: Ukuran font pesan toast.
 Toast

Cara Membuat FlutterToast :

1. Buat Proyek Flutter

2. Tambahkan Flutter Toast Dependencies dalam proyek

3. Impor package fluttertoast di library

4. Terapkan kode untuk menampilkan pesan toast di Flutter

 Toast

Flutter menyediakan beberapa properti kepada pengguna untuk menampilkan pesan

toast, yang diberikan di bawah ini:
Description
Property

msg String(Required)

toastlength Toast.LENGTH_SHORT or Toast.LENGTH_LONG

gravity ToastGravity.TOP or ToastGravity.CENTER or ToastGravity.BOTTOM

timeInSecForIos Hanya digunakan di IOS ( 1 sec or lebih )

backgroundColor Menentukan warna background

textColor Menentukan warna text

fontSize Menentukan ukuran font pada notifikasi

FlutterToast.cancel(): Fungsi ini digunakan ketika Anda ingin membatalkan semua

permintaan untuk menampilkan pesan kepada pengguna.
Notification Widget
(Alert Dialog)
 Alert Dialog

Alert Dialog adalah alat berguna yang memberi tahu

pengguna aplikasi. Ini adalah pop up di tengah layar yang
menempatkan overlay di atas latar belakang. Biasanya, ini
digunakan untuk mengonfirmasi salah satu tindakan
pengguna yang berpotensi tidak dapat dikembalikan.
 Property Alert Dialog

Title: Properti ini memberi judul ke kotak AlertDialog yang menempati di bagian atas
AlertDialog. Lebih baik membuat judul sesingkat mungkin sehingga pengguna tahu
tentang penggunaannya dengan sangat mudah. Kita bisa menulis judulnya di AlertDialog
seperti di bawah ini:

Action: Ini ditampilkan di bawah konten. Misalnya, jika ada kebutuhan untuk
membuat tombol untuk memilih ya atau tidak, maka itu hanya ditentukan di properti
tindakan. Kita dapat menulis atribut tindakan di AlertDialog seperti di bawah ini:
 Property Alert Dialog

Content: Ini ditampilkan di bawah konten. Misalnya, jika ada kebutuhan untuk
membuat tombol untuk memilih ya atau tidak, maka itu hanya ditentukan di
properti tindakan. Kita dapat menulis atribut tindakan di AlertDialog seperti di
bawah ini:
 Property Alert Dialog

ContentPadding: Memberikan padding yang diperlukan untuk konten di

dalam widget AlertDialog. Kita dapat menggunakan atribut ContentPadding di
AlertDialog seperti di bawah ini:

Shape: Atribut ini memberikan bentuk ke kotak Alert Dialog, seperti kurva,
lingkaran, atau bentuk lain yang berbeda.
Notification Widget
(Snack Bar)
 Snack Bar

Snackbar di Flutter adalah widget yang menampilkan pesan

ringan yang memberi informasi kepada pengguna secara singkat
saat tindakan tertentu terjadi. Snackbar menampilkan pesan
untuk waktu yang sangat singkat, dan ketika waktu yang
ditentukan selesai, itu akan menghilang dari layar.
 Snack Bar

Secara default, snack bar ditampilkan di

bagian bawah layar. Ini adalah cara terbaik
untuk memberikan umpan balik kepada
pengguna. Ini juga berisi beberapa
tindakan yang memungkinkan pengguna
untuk membatalkan atau mengulangi
tindakan apa pun. Biasanya, snack bar
digunakan dengan widget scaffold.
 Property Snack Bar

Berikut ini adalah properti penting dari Snackbar yang digunakan di Flutter:
Property Description

content Ini adalah konten utama dari snack bar, yang sebenarnya adalah sebuah widget teks.

duration Ini digunakan untuk menentukan berapa lama snack bar harus ditampilkan.

action Ini digunakan untuk mengambil tindakan saat pengguna mengetuk Snackbar. Itu tidak
bisa ditutup atau dibatalkan. Kami hanya dapat membatalkan atau mengulang di snack
bar.

elevation Ini adalah koordinat z tempat snackbar ditempatkan. Ini digunakan untuk mengontrol
ukuran bayangan di bawah snackbar.

shape Ini digunakan untuk menyesuaikan bentuk snackbar.

behavior Ini digunakan untuk mengatur lokasi snackbar.

bagroundcolor Ini menentukan latar belakang Snackbar.

animation Ini mendefinisikan pintu keluar dan masuk Snackbar.

Notification Widget
(Custom Dialog)
 Custom Dialog

Custom Dialog jendela popup untuk memberikan beberapa

alternatif bagi pengguna (opsi seperti mengakui / meluruh).
Dasar Alert Dialog tidak akan berguna untuk setiap
kebutuhan. Jika Anda ingin menjalankan Dialog kustom
yang dikembangkan lebih lanjut, Anda dapat menggunakan
widget Dialog untuk itu. Teknik showDialog akan berlanjut
seperti sebelumnya.
Navigator Route
 Navigation Route

Navigation and Routing adalah beberapa konsep inti dari semua aplikasi seluler,
yang memungkinkan pengguna untuk berpindah di antara halaman yang berbeda.
Kita tahu bahwa setiap aplikasi seluler berisi beberapa layar untuk menampilkan
berbagai jenis informasi. Misalnya, suatu aplikasi dapat memiliki layar yang berisi
berbagai produk. Ketika pengguna mengetuk produk itu, segera akan muncul
informasi rinci tentang produk itu. Pada android native, kita dapat menggunakan
Intent untuk berpindah halaman. Di Flutter, layar dan halaman dikenal sebagai
Route, dan route ini hanyalah sebuah widget di Android, route mirip dengan Activity,
sedangkan di iOS, ini setara dengan ViewController.
 Navigation Route

Di aplikasi seluler apa pun, melakukan navigasi ke halaman yang berbeda

menentukan alur kerja aplikasi, dan cara untuk menangani navigasi disebut sebagai
routing. Flutter menyediakan kelas basic routing MaterialPageRoute dan dua metode
yaitu Navigator.push () dan Navigator.pop () yang menunjukkan cara menavigasi di
antara dua rute. Langkah-langkah berikut diperlukan untuk memulai navigasi dalam
aplikasi:
Langkah 1: Pertama, Anda perlu membuat dua route.
Langkah 2: Kemudian, navigasikan ke satu route dari route lain dengan
menggunakan metode Navigator.push ().
Langkah 3: Terakhir, navigasikan ke route pertama dengan menggunakan metode
Navigator.pop ().
 Navigation With Name Route

Navigator menyimpan riwayat route berbasis tumpukan. Jika ada kebutuhan untuk
menavigasi ke layar yang sama di banyak bagian aplikasi, pendekatan ini tidak
bermanfaat karena menghasilkan code duplication. Solusi untuk masalah ini dapat
dihilangkan dengan menentukan route bernama dan dapat menggunakan name
routes untuk navigasi.

Kita dapat menggunakan name route dengan menggunakan fungsi

Navigator.pushNamed (). Fungsi ini membutuhkan dua argumen yang diperlukan
(membangun konteks dan string) dan satu argumen opsional. Juga, kita tahu tentang
MaterialPageRoute, yang bertanggung jawab untuk transisi halaman.
Passing Data
 Passing Data

Passing antar halaman

adalah cara yang sangat
umum agar data kita
mengalir dari satu
halaman ke halaman lain,
dan kembali.
Praktikum
Thank you