Stateful Widget dan Stateless Widget

State dari aplikasi dapat dijelaskan dengan sangat sederhana sebagai segala sesuatu yang ada dalam memori aplikasi saat aplikasi sedang berjalan. Ini mencakup widget-widget yang membangun UI aplikasi, seperti tombol, teks font, ikon, dan animasi. Sekarang kita sudah memahami apa itu state, mari kita langsung beralih ke topik utama kita, yaitu widget dengan state (stateful) dan widget tanpa state (stateless) serta perbedaan antara keduanya.

State

State adalah informasi yang dapat dibaca secara sinkron saat widget dibangun dan mungkin berubah selama life cycle widget. Dengan kata lain, state dari widget adalah data object yang propertinya (parameter) dipertahankan ketika widget di-render (ditampilkan) pada layar. State juga dapat berubah ketika digunakan, seperti ketika tanda centang pada kotak CheckBox diklik.

Stateless Widget

Widget yang keadaannya atau statenya tidak dapat diubah setelah dibuild disebut stateless widget. Widget-widget ini tidak dapat diubah setelah dibangun, artinya tidak ada variabel, ikon, tombol, atau pengambilan data yang dapat mengubah keadaan  dan tampilan dari aplikasi. Stateless widget melakukan override terhadap fungsi build() dan mengembalikan widget. Contohnya, kita menggunakan Text atau Icon pada aplikasi Flutter, maka state widget tersebut tidak berubah pada waktu runtime. Widget ini digunakan ketika UI yang ditampilkan bergantung pada informasi dalam object itu sendiri. Contoh lainnya stateless widget adalah Text, RaisedButton, dan IconButtons.

Sintaks

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Yuk, kita lihat apa yang dikatakan kode di atas ini. Nama stateless widget-nya adalah MyApp yang akan dipanggil dari runApp() dan diextend dari stateless widget. Di dalam MyApp, terdapat fungsi build dan memerlukan parameter BuildContext. BuildContext ini unik untuk setiap widget karena digunakan untuk menemukan widget dalam pohon widget.

Catatan – Widget pada aplikasi Flutter ditampilkan dalam bentuk hierarki widget atau pohon widget. Pada hierarki ini, kita menghubungkan widget parent dan child untuk menunjukkan hubungan antara keduanya. Kemudian, widget-widget tersebut digabungkan untuk membentuk tampilan UI pada aplikasi Anda.

Fungsi build berisi sebuah container yang berisi widget Flutter yang akan digunakan untuk mendesain tampilan UI aplikasi. Pada widget stateless, fungsi build hanya dipanggil sekali dan bertugas untuk membuat tampilan UI di layar.

Contoh:

import 'package:flutter/material.dart';

//Fungsi ini memulai proses build dari aplikasi flutter.
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color.fromARGB(255, 230, 255, 201),
        appBar: AppBar(
          leading: const Icon(Icons.menu),
          backgroundColor: Colors.purple,
          title: const Text(
            "Nextgen Tutorial",
            textAlign: TextAlign.start,
          ),
        ), // AppBar
        body: const Center(
          child: Text(
            "Stateless Widget",
            style: TextStyle(color: Colors.black, fontSize: 30),
          ),
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

Output:

Stateful Widget

Widget-widget yang dapat diubah state atau keadaannya setelah dibuild disebut sebagai stateful widget. State ini dapat diubah beberapa kali selama life cycle Widget tersebut. Artinya, state dari aplikasi dapat berubah dengan mengubah variabel, input, atau data yang berbeda. Stateful Widget melakukan overwrite fungsi createState() dan mengembalikan sebuah State. Widget ini digunakan ketika UI dapat berubah secara dinamis, seperti CheckBox, RadioButton, Form, atau TextField.

Meskipun class yang mewarisi stateful widget bersifat tidak berubah (immutable), namun state-nya sendiri bersifat mutable dan berubah saat runtime ketika pengguna berinteraksi dengan widget.

Sintaks

import 'package:flutter/material.dart';

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

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

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

import 'package:flutter/material.dart';

//Fungsi ini memulai proses build dari aplikasi flutter.
void main() => runApp(const MyApp());

// StatefulWidget
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.purple[100],
        appBar: AppBar(
          leading: const Icon(Icons.menu),
          backgroundColor: Colors.purple,
          title: const Text(
            "Nextgen Tutorial",
            textAlign: TextAlign.start,
          ),
        ), // AppBar
        body: const Center(
          child: Text(
            "StateFul Widget",
            style: TextStyle(color: Colors.black, fontSize: 30),
          ),
        ), // Container
      ), // Scaffold
    ); // MaterialApp
  }
}

Output:

Kesimpulan

Stateless widget berguna ketika bagian antarmuka pengguna yang Anda deskripsikan tidak bergantung pada apa pun selain informasi konfigurasi dan BuildContext, sedangkan stateful widget berguna ketika bagian antarmuka pengguna yang Anda deskripsikan dapat berubah secara dinamis.

Tutorial sebelumnya : Mengenal Flutter Widget
Tutorial setelahnya : Flutter Container
Semua Tutorial Flutter : Tutorial Flutter