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 full-size slide

  2. 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 full-size slide

  3. 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 full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Let’s Code

    View full-size slide

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

    View full-size slide

  11. Let’s Code

    View full-size slide

  12. Dicoding
    Dicoding
    Dicoding
    Dicoding Indonesia
    Contact us :
    Contact me :
    [email protected]

    View full-size slide