Dicoding Developer Coaching #55: Flutter | Kelola State Aplikasi dengan Pendekatan State Management

sesuai dengan kondisi aplikasi saat ini. Hal ini berbeda jika menggunakan framework Android atau iOS UIKit yang bersifat imperatif. Lalu bagaimana kita dapat merubah tampilan aplikasi jika framework bersifat deklaratif?

Kita dapat memanfaatkan State Management untuk mengelola state agar lebih mudah dalam mengembangkan aplikasi. Perubahan state dapat mengubah tampilan aplikasi. Dengan begitu, tampilan aplikasi akan lebih fleksibel menyesuaikan state saat ini. Untuk lebih lengkapnya akan dibahas pada Developer Coaching dengan poin pembahasan seperti berikut:

- Declarative UI
- Pengenalan State
- Pendekatan State Management
- Penerapan State Management

Transcript

1. Kelola State Aplikasi dengan Pendekatan State Management
   Dicoding Developer Coaching #55
   Achmad Ilham
   Curriculum Developer Dicoding
   

   View Slide

2. View Slide

3. Imperative vs Declarative UI
   Pada Imperative UI, kita bisa langsung
   mengubah tampilan berdasarkan id atau
   identifier lain.
   // Imperative style
   b.setColor(red)
   b.clearChildren ()
   ViewC c3 = new ViewC(...)
   b.add(c3)
   

   View Slide

4. Imperative vs Declarative UI
   Sementara pada UI deklaratif, UI akan
   dibangun ulang berdasarkan state saat itu.
   // Declarative style
   return ViewB(
   color: red,
   child: ViewC(...),
   )
   

   View Slide

5. Declarative UI
   f(x)=2x+1
   f(4)= ?
   f(0)= ?
   f(-5)= ?
   f(4)= 9
   f(0)= 1
   f(-5)= -9
   ● Initial
   ● Loading
   ● Loaded
   ● Error
   

   View Slide

6. View Slide

7. State
   Ephemeral state App state
   ● Index Tab pada TabBar atau
   BottomNavigationBar.
   ● Nilai boolean pada Switch.
   ● Nilai progres pada animasi.
   ● Informasi User saat Login.
   ● Preferensi tema.
   ● Fitur cart pada aplikasi e-commerce.
   

   View Slide

8. State Management
   ● setState
   ● Provider
   ● InheritedWidget & InheritedModel
   ● Riverpod
   ● BLoC
   ● ...
   

   View Slide

9. State Management
   ● setState
   ● Provider
   ● InheritedWidget & InheritedModel
   ● Riverpod
   ● BLoC
   ● ...
   

   View Slide

10. setState
    ● State Management sederhana.
    ● Bawaan Flutter SDK.
    ● Cocok digunakan untuk ephemeral state.
    

    View Slide

11. setState
    

    View Slide

12. Let’s Code
    

    View Slide

13. Provider
    ● Menggunakan package provider.
    ● Salah satu package yang direkomendasikan oleh tim Flutter.
    

    View Slide

14. Provider
    

    View Slide

15. Let’s Code
    

    View Slide

16. Dicoding
    Dicoding
    Dicoding
    Dicoding Indonesia
    Contact us :
    Contact me :
    ilham@dicoding.com
    

    View Slide