Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Dicoding Indonesia

July 27, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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 :
    [email protected]

    View Slide