Manajemen State

(State Management)

Pemrograman Mobile

 

Septian Cahyadi, M.Kom. & Muhamad Saad Nurul Ishlah, M.Comp.

Dept. Sistem Informasi & Dept. Ilmu Komputer, Universitas Pakuan

Agenda Kuliah

  • Paradigma Deklaratif (Declarative) vs Imperatif (Imperative)
  • Ephemeral State vs App State
  • Manajemen State (StatefulWidget & InheritedWidget)
  • Opsi lain Manajemen State

State Management

What is it?

Flutter membangun antarmuka pengguna dengan merefleksikan state saat ini

Flutter membangun antarmuka pengguna dengan merefleksikan state saat ini

Paradigma pemrograman Declarative

Declarative vs Imperative

Widget

Container

ButtonA

ButtonB

Text

// onClicked Callback
onClicked () {

  // Imperative: Mengubah
  Text text = getObjectText();
  text.setColor("blue");
    

  // Declarative: Mengganti
  return TextWidget(
    color: blue,
  );
    
}

Text

Declarative vs Imperative

Widget

Container

ButtonA

ButtonB

Text

// onClicked Callback
onClicked () {

  // Imperative: Mengubah
  Text text = getObjectText();
  text.setColor("blue");
    

  // Declarative: Mengganti
  return TextWidget(
    color: blue,
  );
    
}

Text

Declarative vs Imperative

Widget

Container

ButtonA

ButtonB

Text

// onClicked Callback
onClicked () {

  // Imperative: Mengubah
  Text text = getObjectText();
  text.setColor("blue");
    

  // Declarative: Mengganti
  return TextWidget(
    color: blue,
  );
    
}

Text

Declarative vs Imperative

Widget

Container

ButtonA

ButtonB

// onClicked Callback
onClicked () {

  // Imperative: Mengubah
  Text text = getObjectText();
  text.setColor("blue");
    

  // Declarative: Mengganti
  return TextWidget(
    color: blue,
  );
    
}

Text

State?

State == Data

Data yang berhubungan dengan Domain aplikasi, seperti TODO List, Cart Items, etc..

 

int age;

String title;

int counter;

List<Todo> todoList;

bool isActivated;

State

  • Arti luas: state adalah segala sesuatu yang ada di memori saat aplikasi berjalan.
    • aset aplikasi,
    • semua variabel yang disimpan framework Flutter tentang UI,
    • status animasi, tekstur, font
    • dll 
  • Tidak semua kita kelola
  • Data apa pun yang dibutuhkan untuk membangun kembali UI kapanpun.

State Management

==

Data Management

Ephemeral vs App State

Ephemeral State

  • UI state atau locale state
  • Widget lain jarang membutuhkan state ini
  • Tidak berubah secara kompleks
  • Dapat dikelola dengan kelas State & metode setState dalam StatefulWidget

App State

  • Shared state
  • State level aplikasi
  • Biasanya digunakan oleh banyak widget
  • Banyak opsi untuk mengelola, contoh: InheritedWidget, provider, riverpod, mobx, redux, dll

Ephemeral State

Contoh

  • Halaman saat ini pada PageView
  • Progress Animasi
  • Tab yang terpilih

App State

Contoh

  • User preferences
  • Login info
  • Notification
  • Shopping cart
  • Read/unread state dari artikel di aplikasi News

Contoh Ephemeral State

class MyHomepage extends StatefulWidget {
  const MyHomepage({super.key});

  @override
  State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

_index tidak diakses Widget lain, hanya digunakan dalam MyHomepage saja

Contoh App State

Membedakan State?

Bagaimana Memulai?

Memulai mengelola State

  • Mulai dari Ephemeral State
  • Ketika aplikasi mulai membesar, mungkin butuh App State

 

“The rule of thumb is: Do whatever is less awkward.”

- Dan Abramov (React setState vs Redux's store)

Manajemen State

(Application State)

Mengelola Data melalui Widget Tree

  • Memberikan Data dari Widget atas ke widget bawah (Lifting State Up)

  • Cons: Widget yang tidak menggunakan Data, mendapat data

  • Bisa sangat berantakan, update data. callback hell

Mengelola Data melalui InheritedWidget

  • Membuat subclass InheritedWidget

  • Akses data dari widget yang hanya membutuhkan

  • Begitupun untuk mengupdate

Contoh Inherited Widget

// Definisikan subclass InheritedWidget
class FrogColor extends InheritedWidget {
  const FrogColor({
    Key? key,
    required this.color,
    required Widget child,
  }) : super(key: key, child: child);

  final Color color;

  static FrogColor of(BuildContext context) {
    final FrogColor? result = context.dependOnInheritedWidgetOfExactType<FrogColor>();
    assert(result == null, 'No FrogColor found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(FrogColor old) => color != old.color;
}

// Gunakan di dalam widget yang membutuhkan
class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FrogColor(
        color: Colors.green,
        child: Builder(
          builder: (BuildContext innerContext) {
            return Text(
              'Hello Frog',
              style: TextStyle(color: FrogColor.of(innerContext).color),
            );
          },
        ),
      ),
    );
  }
}

Opsi Pengelolaan State Lain

  • Provider
  • Riverpod
  • Redux
  • Fish-REdux
  • BLoC / Rx
  • GetIt
  • MobX
  • dll

 

https://docs.flutter.dev/development/data-and-backend/state-mgmt/options 

Diskusi

Ada pertanyaan?

Referensi

Terima Kasih

Referensi

Made with Slides.com