Posts

2 Langkah Mudah State Management pada Flutter

Bismillah, pada kali ini kita akan membahas mengenai salah satu state management yang keren sekali yaitu Mobx, dimana mobx ini penggunaannya sangat simple dan mudah sekali.

Mobx menggunakan prinsip reactive programming, sehingga mirip-mirip dengan penggunaan bloc sebagai state management.

Inti dari penggunaan state management sendiri fungsinya agar kita memisahkan antara bisnis logika dengan tampilan antarmuka pada kodingan kita.

Oke kita langsung saja buat, kita buat sebuah project Flutter baru lalu kita tambahkan dependensinya pada pubspec.yaml seperti berikut :

tambahkan dependensi yang dihighlight dengan warna biru seperti diatas:

mobx dan flutter_mobx adalah mobx itu sendiri sehingga bisa digunakan di project flutter kita

build_runner dan mobx_codegen fungsinya untuk generate kode-kode ribetnya secara otomatis

sekarang kita akan coba membuat tampilan seperti gambar berikut :

Berikut kode flutternya :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Mobx',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterMobx(),
    );
  }
}

class CounterMobx extends StatelessWidget {
  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Counter Mobx"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "0",
              style: TextStyle(fontSize: 32),
            ),
            FlatButton(
              onPressed: counter.add,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              shape: CircleBorder(),
              color: Colors.blue,
            )
          ],
        ),
      ),
    );
  }
}

Simple kan?

Oke kita lanjut sekarang ke bagian state managementnya yaitu mobx, kita buat sebuah folder baru dengan nama store dan kita buat sebuah file counter.dart didalamnya seperti berikut :

lalu sekarang kita mulai ketikan kodenya

Langkah 1 (counter.dart)

import 'package:mobx/mobx.dart';

part 'counter.g.dart'; // ini file yang nanti akan digenerate
class Counter = _Counter with _$Counter; // ini juga digenerate

abstract class _Counter with Store {
  @observable
  int count = 0;

  @action
  void add() {
    count++;
  }
}

sudah seperti ini saja, lalu kita buka terminal dan ketikkan perintah berikut agar generate kode mobxnya

flutter packages pub run build_runner build

Jika berhasil maka akan ada file baru counter.g.dart dan error pada counter.dart akan hilang seperti berikut :

Langkah 2 (Widget)

Pada langkah kedua ini, kita tinggal melakan Observe atau memantau perubahan nilai dari variabel count yang tadi telah kita buat pada counter.dart, sehingga setiap kali ada perubahan pada nilai tersebut maka tampilannya otomatis akan terupdate.

kita ubah pada class CounterMobx yang berada di main.dart menjadi seperti berikut :

class CounterMobx extends StatelessWidget {
  final Counter counter = Counter(); // inisialisasi Counter kita

  @override
  Widget build(BuildContext context) {
...

Lalu kita tambahkan widget Observer pada widget yang nanti akan kita tampilkan nilai dari variabel count tadi.

children: <Widget>[
            Observer(
              builder: (_) => Text(
                "${counter.count}", // tampilan countnya
                style: TextStyle(fontSize: 32),
              ),
            ),
            FlatButton(
              onPressed: counter.add, // tambahkan ini juga
...

hasil akhir CounterMobx :

class CounterMobx extends StatelessWidget {
  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Counter Mobx"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Observer(
              builder: (_) => Text(
                "${counter.count}",
                style: TextStyle(fontSize: 32),
              ),
            ),
            FlatButton(
              onPressed: counter.add,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              shape: CircleBorder(),
              color: Colors.blue,
            )
          ],
        ),
      ),
    );
  }
}

Selesai, dan sekarang tinggal kita test

Leave a Reply :

* Your email address will not be published.