Pemrograman Mobile

Akhmad Khanif Zyen

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 CPMK
• Mahasiswa mampu menulis kode program menggunakan state
management provider dengan baik
• Mahasiswa mampu menulis kode program untuk authentikasi menggunakan
appwrite dengan baik
• Mahasiswa mampu menulis kode program CRUD menggunakan
appwrite dengan baik
• Mahasiswa mampu menulis kode program realtime menggunakan
appwrite dengan baik
• Mahasiswa mampu menulis kode program upload bucket storage
menggunakan appwrite dengan baik

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Pertemuan 1-2

• Sub CPMK :
• Mahasiswa mampu menjelaskan state management provider
• Prasyarat:
• Memahami dasar layouting Flutter dengan baik
• Pernah menggunakan state management setState
• Bahan Kajian
• Provider, StateProvider, FutureProvider
• StreamProvider, StateNotifierProvider, ChangeNotifierProvider
• Provider Modifier (.family, .autoDispose)

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Providers
• Provider menjadi bagian penting dalam aplikasi riverpod.
• Provider adalah object yang membungkus state dan memungkinkan
untuk memantau (listen) state.
Type of Provider Provider Create Function Example Use Case
Provider Returns any type A service class / computed property
(filtered list)
StateProvider Returns any type A filter condition / simple state object

FutureProvider Returns a Future of any type A result from an API call

StreamProvider Returns a Stream of any type A stream of results from an API

StateNotifierProvider Returns a subclass of StateNotifier A complex state object that is

immutable except through an interface
ChangeNotifierProvider Returns a subclass of ChangeNotifier A complex state object that requires
TEKNIK INFORMATIKA UNISNU JEPARA mutability https://tif.unisnu.ac.id
 1. Provider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Provider

• Object yang menyediakan data yang dapat diakses oleh widget atau
provider lainnya
• Memiliki tipe data primitive atau non-primitive (instance dari class)
• Bersifat immutable, sehingga harus diawali dengan keyword final

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Usage

1. Membuat Provider:

2. Mendaftarkan Riverpod agar provider bisa diakses:

3. Mengakses provider:

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Mengakses Provider
Cara 1: ConsumerWidget

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Mengakses Provider
Cara 2: Consumer

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 ConsumerWidget vs
Consumer

• ConsumerWidget akan me-rebuild ulang seluruh widget (fungsi

build dipanggil lagi)
• Consumer akan me-rebuild spesifik widget yang ingin kita update UI
nya saja
• Jika terdapat dua widget atau lebih yang bergantung dengan
provider, maka sebaiknya gunakan ConsumerWidget dengan widget
yang sudah dibreakdown kecil-kecil

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 ref.watch() vs ref.read()

• ref.read()
• digunakan untuk menampilkan provider sekali saja
• meskipun diletakkan dalam fungsi build() maka ia tidak akan berubah
(khusus untuk tipe provider lain yg mutable)
• ref.read() cocok diletakkan diluar build()
• ref.watch()
• Digunakan untuk menampilkan provider dan memantaunya (listen) jika ada
perubahan
• ref.watch() cocok diletakkan didalam build()

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Mengakses Provider dalam
StatefulWidget

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Catatan

• Didalam state lifecycle (initState, setState) jika ingin

mengakses provider hindari penggunaan ref.watch(), karena akan
menduplikasi listener. Gunakan ref.read() saja.

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 2. StateProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 StateProvider

• Memiliki sifat yang sama seperti Provider

• Biasanya untuk memantau state yang berubah-ubah nilainya

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Usage

• Membuat StateProvider:

• Mengganti state dari StateProvider:

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Contoh studi kasus

• Membuat sebuah StateProvider yang berubah berdasarkan

TextField yang diisi oleh user

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 3. StateNotifier &
StateNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 StateNotifierProvider

• Penggunaan StateProvider cocok untuk tipe data primitive, namun

untuk tipe data kompleks / class kita bisa menggunakan
StateNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Mengapa StateNotifier

• Penggunaan StateNotifier untuk memastikan object model yang

digunakan bersifat immutable, sehingga memiliki kelebihan:
• Membandingkan nilai state sebelumnya dengan nilai state yang baru
• Mengimplementasi mekanisme undo-redo
• Debug application state menjadi lebih mudah
• Penggunaan StateNotifier untuk memastikan semua logic yang
bertujuan untuk mengupdate state tetap berada di dalam
StateNotifier sehingga memudahkan programmer mengelola logic
terhadap state.

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Update class User

• Setiap update class model yang berada dalam UserNotifier, harus

memanggil constructor User dengan menyertakan semua property
• Ini kurang efisien sehingga anda perlu mengupdate class User
dengan memanfaatkan extensions "generate dart data class"

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Update class UserNotifier

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Membuat
StateNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Mengakses
StateNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Menambahkan method
pada UserNotifier

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Menambah TextField dan
function onSubmitAge

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Alternatif mengisi initial
data User
• Untuk initial data User, diset ketika membuat userProvider dengan
mengisi constructor UserNotifier
• Alternatif lain adalah mengisi initial data di UserNotifier dengan
mengisi constructor User

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Select property

• Ketika mengakses state menggunakan ref.read() maupun

ref.watch() maka ia akan memantau semua perubahan property
dalam state tersebut
• Bagaimana jika kita hanya menginginkan perubahan kondisi
tertentu, misal hanya mengupdate state ketika property name
berubah, tetapi tidak age, maka kita bisa menggunakan .select

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 4. ChangeNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 ChangeNotifierProvider

• ChangeNotifierProvider di riverpod akan me-listen ChangeNotifier

bawaan Flutter (di package material.dart)
• Ia satu-satunya provider dalam riverpod yang berjenis mutable
• Pastikan menggunakan ChangeNotifierProvider ketika anda
membutuhkan state yang mutable
• Developer riverpod sendiri sangat menyarankan untuk menghindari
menggunakan ChangeNotifierProvider tetapi gunakan
StateNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 5. FutureProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 FutureProvider

• Merupakan jenis provider yang mengembalikan Future, dan dapat

diakses oleh widget turunannya
• Biasanya untuk kode asynchronous seperti mengakses API,
membaca file, membaca timer dan lain-lain
• Dapat digunakan sebagai pengganti FutureBuilder bawaan Flutter
dengan adanya property .when

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Use case

• Mendapatkan response dari API di endpoint

https://jsonplaceholder.typicode.com/users/1
• Membuat class MUser, kemudian gunakan “generate data class”

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Use Case

• Membuat FutureProvider:

• Mengakses FutureProvider:

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Use Case

• Mengakses FutureProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Memisahkan api ke
repository
• Ada baiknya untuk yang berkaitan dengan API dipisahkan menjadi
repository sendiri, misal API untuk user, dipisah ke UserRepository

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Membuat Provider untuk
UserRepository

• Pada kode sebelumnya, semisal nanti API komplit untuk CRUD,

maka setiap pemanggilan UserRepository akan membuat instance
yang berulang-ulang dan ini tidak efisien karena memakan memory
• Maka sebaiknya UserRepository dibuatkan Provider sendiri karena
mendukung caching

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Membuat Provider untuk
UserRepository

• Kenapa menggunakan ref.watch(), bukan ref.read() karena

userRepositoryProvider harus dipantau (listen) untuk memastikan
mendapat data terbaru dari API
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 6. StreamProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 StreamProvider

• Stream adalah function asynchronous yang dikirimkan secara

berurutan berdasarkan event yang diberikan
• Stream Provider akan me-listen Stream dan mengekspos konten ke
widget turunannya

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Use Case

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Fitur lain: .family

• Terdapat modifier .family, yang bertujuan untuk membuat provider

yang unik berdasarkan parameter yang dikirimkan dari external
(pemanggil)
• Contoh: mengirim parameter id pada FutureProvider untuk
mendapat user berdasarkan id nya.
• .family biasa digunakan untuk FutureProvider, StreamProvider,
StateProvider, StateNotifierProvider, ChangeNotifierProvider

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Fitur lain: .family

• .family hanya bisa menerima satu parameter saja. Untuk dapat

menerima lebih satu parameter bisa menggunakan class, atau
menggunakan package tuple

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Fitur Lain: .autoDispose

• Terdapat modifier .autoDispose, digunakan untuk menghapus cache

jika sudah tidak digunakan
• Contoh:
• ketika menggunakan Firebase, menutup koneksi untuk menghindari biaya
tagihan yang tidak diperlukan
• Untuk mereset state ketika user meninggalkan halaman dan kembali ke
halaman tersebut

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Usage

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Ref vs WidgetRef

• Ketika membuat provider, terdapat parameter ref, yang bisa

digunakan sebagai pemanggil provider lain. Jadi provider di dalam
provider
• Untuk WidgetRef digunakan untuk memanggil provider di dalam
widget

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 ref.keepalive()

• Penggunaan provider dengan autoDispose() akan menambah

method baru pada ref yaitu .keepAlive()
• Penggunaan .keepAlive() memberitahu riverpod bahwa state dari
provider tetap disimpan meskipun sudah tidak dipantau (listen)

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 ref.onDispose()

• ref.onDispose((){}) merupakan callback apa yang nanti akan

dilakukan setelah terjadi dispose()
• onDispose() melekat ke Ref, dan tidak mewajibkan ada
autoDispose()

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 ref.onCancel() dan
ref.onResume()

• Method ref.onCancel() dan ref.onResume() hanya untuk

StreamProvider()
• ref.onCancel() digunakan untuk callback event ketika sedang pause
dari stream/subscription
• ref.onResume() digunakan untuk callback event ketika sedang
memasuki stream/subscription lagi setelah pause

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Latihan 1

• Ubahlah kode sebelumnya yang menggunakan modifier .family agar

tidak menggunakan 2 provider yang dipanggil dalam widget build(),
tetapi pasanglah provider di dalam provider dan tidak
menggunakan .family. Dan didalam widget build() hanya memanggil
1 provider saja

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Tugas 1

• Buatlah tampilan flutter dengan struktur widget seperti berikut dan

gunakan riverpod sebagai state management, dimana ketika tombol
increment di klik maka akan mengubah Text counter di CounterA
dan Text counter di CounterB

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Tugas 1
int counter = 0;
MyHomePage
void increment(){}
Counter

Text CounterA
Middle
"MyHomePage" counter
MyHomePage increment
counter

Sibling
0 Text
CounterB
counter
counter
Increment
ElevatedButton
increment

0 Sibling Text
counter
Text
"Sibling"

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Referensi

• https://riverpod.dev/docs/getting_started
• https://codewithandrea.com/articles/flutter-state-management-
riverpod/
• https://www.youtube.com/playlist?list=PLMom3j6kp1rHGAM6-
FoIByZ360CkI2msj
• https://www.youtube.com/watch?v=pwflXIA-6YQ

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id