Flutter

Flutter – Stateless vs Stateful

Amrizal Rizky Fajar28 Februari 20211 Comment05.9k

Assalamualaikum Warahmatullahi Wabarakatuh.

Halo halo haloooo…. Apa kabar semuanya? Basa basi dulu lah haha. Di artikel kali ini kita akan membahas tentang konsep Stateless dan Stateful yang ada pada Flutter. Apasih bedanya Stateless dan Stateful Widget yang ada di Flutter? Yaudah yuk langsung kita bahas aja.

Apa Itu Stateless Dan Stateful?

Stateless Widget dapat dikatakan sebagai widget statis yang berarti widget tersebut tidak berubah.

Stateful Widget merupakan widget yang dinamis. Ini berarti widget ini dapat merubah tampilannya sesuai response dari events yang dipicu baik dari interaksi user maupun adanya variabel atau nilai baru yang didapat.

Bagaimana Cara Mereka Bekerja?

Berikut merupakan skema yang kami buat agar dapat membantu teman-teman pembaca untuk memahami proses yang ada pada Stateless dan Stateful Widget.

Oke oke.. jadi gini penjelasannya. Jika dilihat dengan seksama proses yang ada pada stateless dan stateful hampir sama, yaitu terdapat proses constructor dan build. Constructor merupakan sebuah tahap penyusunan atau pembuatan setiap state atau keadaan yang ada akan diterapkan, sedangkan Build merupakan tahap dimana setiap widget dan state dikonstruksi atau dibangun ke dalam bentuk UI (User Interface).

Yang membedakan antara Stateless dan Stateful ialah pada Stateful terdapat Internal State. Apa itu Internal State? Internal state dapat dikatakan sebuah tahap dimana terdapat pemrosesan state atau keadaan baru yang dipicu dari adanya penambahan maupun perubahan data. Jika memang Internal State ini terpicu maka sistem akan melakukan re-render tampilan dari widget tersebut.

Internal state sendiri memiliki beberapa tahap atau metode, antara lain yaitu initState, didChangeDependencies, setState, didUpdateWidget, dll.

Penerapan Stateless dan Statefull

Sekarang kita akan mencoba membangun sebuah program sederhana untuk mengetes fungsi dari Stateless dan Stateful itu sendiri. Program ini hanya memiliki dua button dengan tujuan yang sama yaitu merubah warna dari button itu sendiri, hanya saja yang membedakan ialah button pertama akan menerapkan Stateless dan button kedua akan menerapkan Stateful.

Berikut merupakan isi code dari button pertama (Stateless).

class ButtonStatelessWidget extends StatelessWidget {
  final List colors = [
    Color(0XFF1ABC9C),
    Colors.red,
    Colors.blue,
    Colors.grey,
    Colors.indigo
  ];

  int index = 0;

  final Random random = new Random();

  @override
  Widget build(BuildContext context) {
    return new RaisedButton(
      child: const Text('Stateless Widget',
          style: const TextStyle(
            color: const Color(0XFF1ABC9C),
            fontSize: 24,
          )),
      shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(24),
          side: const BorderSide(
            color: const Color(0XFF1ABC9C),
            width: 2,
          )),
      color: Colors.white,
      onPressed: () {
        index = random.nextInt(colors.length);
        print('Stateless => index: ' + index.toString());
      },
    );
  }
}

Dan berikut merupakan isi code dari button kedua (Stateful).

class ButtonStatefulWidget extends StatefulWidget {
  @override
  _ButtonStatefulWidgetState createState() => _ButtonStatefulWidgetState();
}

class _ButtonStatefulWidgetState extends State<ButtonStatefulWidget> {
  final List _colors = [
    Color(0XFF1ABC9C),
    Colors.red,
    Colors.blue,
    Colors.grey,
    Colors.indigo
  ];

  final Random _random = new Random();

  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return new RaisedButton(
      child: const Text('Stateful Widget',
          style: const TextStyle(
            color: Colors.white,
            fontSize: 24,
          )),
      shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(24),
          side: new BorderSide(
            color: _colors[_index],
            width: 2,
          )),
      color: _colors[_index],
      onPressed: () {
        setState(() => _index = _random.nextInt(_colors.length));
        print('Stateful => index: ' + _index.toString());
      },
    );
  }
}

Dan inilah video hasil dari pengetesan kedua button tersebut.

Dari video di atas dapat dilihat bahwa jika button Stateless ditekan maka akan muncul log nilai dari index yang terus berubah tetapi tidak merubah tampilan UI yang ada. Sedangkan jika button Stateful ditekan, akan muncul log nilai index juga yang terus berubah dan juga disertai oleh perubahan warna dari button tersebut.

Ini terjadi karena perubahan data memicu sebuah state untuk melakukan re-render atau merender ulang button tersebut sehingga dapat berganti warna. Proses ini dapat terjadi karena bantuan method setState() yang ada pada Stateful Widget.

Stateful Lebih baik dari Stateless?

Dari penjelasan di atas mungkin sebagian dari kalian akan berpikir berarti Stateful lebih baik dari Stateless. Jawabannya salah. Baik Stateless dan Stateful memiliki peranan dan kelebihannya masing – masing.

Sebelumnya dijelaskan bahwa untuk dapat merubah tampilan UI, Stateful harus melakukan re-render widget tersebut. Semaking banyak widget yang di re-render maka semakin tinggi pula performance yang diperlukan oleh device untuk menjalankan aplikasi atau tampilan tersebut.

Jika kalian ingin menjadi developer flutter yang baik maka kalian harus dapat berpikir bijak apa yang diperlukan oleh widget tersebut.

Okeeee jadi seperti itu pembahasan tentang Stateless dan Stateful nya. Cukup sekian karena artikel sudah terlalu panjang hehe. Oh iya buat kalian yang tertarik untuk melihat code penuhnya bisa buka di Github.

Penulis mohon maaf jika terdapat salah kata, istilah atau arti dari artikel ini. Terimakasih juga untuk para pembaca yang selalu mampir ke website KawanKoding, dan semoga ilmu yang didapatkan dapat bermanfaat bagi pembaca maupun orang-orang disekitarnya

Wassalamualaikum Warahmatullahi Wabarakatuh.