Memahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget

Flutter adalah Cross-Platform Mobile App SDK (Software Development Kit) untuk membuat aplikasi Android dan iOS dari satu codebase (shared) dengan performa tinggi. Saat ini flutter dapat digunakan untuk mengembangkan aplikasi Web, Linux dan MacOS. Namun fitur ini masih dalam tahap beta.

Flutter dikembangkan oleh google dengan tujuan utama mempermudah pengembangan aplikasi mobile. Penggunaan flutter 100% gratis (Open Source). Dart merupakan bahasa pemrograman yang digunakan untuk mengembangkan aplikasi Flutter.

Stateless vs Stateful Widget
  1. Untuk dapat mengubah data pada widget, kita memerlukan stateful widget.
  2. Stateful Widget merupakan Widget yang dapat berubah dinamis.
  3. Sebagai contoh, pada stateful widget, kita dapat mengubah value dengan menekan tombol
  4. Pada prakteknya, stateless widget bisa memiliki child stateful widget dan sebaliknya

Memahami konsep Stateful Widget lifecycle paling dasar dalam Flutter: initState(), setState(), dan dispose()

Widget Lifecycle
  1. Data pada stateful widget dapat berubah
  2. Namun, untuk mengubah data yang ada pada stateful widget kita perlu mentriggernya.
  3. Yang jadi pertanyaan:
    • Pakai apa mentriggernya?
    • Kapan harus mentrigger?
    • Bagaimana cara mentriggernya?
  4. Semua pertanyaan diatas jawabannya adalah: Widget Lifecycle

Siklus hidup sebuah widget

Memahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget
  1. initState()
    • ini adalah method yang pertama kali di panggil saat widget dibuat.
    • Method ini hanya dipanggil sekali dan tidak akan bisa dipanggil lagi selama widget tersebut masih hidup
    • Biasanya digunakan untuk menginisialisasi value-value yang ada pada widget
  2. build()
    • Method berfungsi untuk menampilkan widget tree
    • Dapat dipanggil lagi apabila ada perubahan data pada widget
  3. setState()
    • Method yang berfungsi untuk mengupdate data pada widget
    • Apabila method ini dijalankan, akan mentrigger widget untuk di build ulang (bukan di create ulang)
    • Biasanya dipanggil melalui widget yang dapat menerima inputan user seperti button, textfield, dsb.
    • Digunakan untuk mengupdate data pada widget, missal: mengubah teks/mengubah warna widget/mengubah ukuran widget, dsb.
  4. dispose()
    • Method dijalankan apabila widget akan dibuang (biasanya ketika user meninggalkan halaman/menutup aplikasi)
    • Dijalankan hanya sekali Ketika widget dibuang

Contoh Membuat Stateful Widget
  1. Pada latihan ini, anda akan membuat aplikasi counter sederhana
  2. Counter yang dibuat terdiri dari Button Widget dan Text Widget
  3. Text Widget berfungsi untuk menampilkan angka
  4. Button Widget berfungsi untuk menambahkan angka
  5. Pada button widget, anda akan mengimplementasi fungsi setState untuk mengupdate angka
  6. Buat project flutter baru, hapus semua kode pada main.dart
  7. Ubah kodingan menjadi seperti dibawahMemahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget
  8. Buatlah stateful widget bernama MyHomePage
  9. Tips: ketik “stful”, maka akan ada sugesti widget “stateful”
  10. Ketik enter pada sugesti tersebut, lalu Anda tinggal mengisi nama widgetnyaMemahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless WidgetMemahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget

Contoh 2 Membuat Stateful Widget
  1. Buatlah tampilan aplikasi seperti gambar disamping
  2. Gunakan pengetahuan anda pada sesi sebelumnya untuk membuat tampilan aplikasi
  3. Anda bebas menggunakan button apa saja sesuai keinginanMemahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget
  4. Contoh CodingMemahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget
  5. Isi widget text angka 10 menjadi variable (bukan di hardcode) agar nilainya bisa diubah-ubahMemahami Konsep Dasar State Management Pada Flutter Stateful Dan Stateless Widget
  6. Isi properti onPressed yang dimiliki oleh FAB dengan method setState(). Ubah value didalam method setState.
  7. Lalu klik button pada aplikasi, apa yang terjadi?

Kesimpulan
  1. StatelessWidget digunakan untuk membuat widget yang statis karena statenya tidak dapat diubah
  2. StatefulWidget digunakan untuk membuat widget yang dinamis karena statenya dapat diubah, salah satunya menggunakan metode setState

Sumber Referensi  : developerlibs.com