Stateful Widget

Kurnia Andi Nugroho

Tue, 17 Sep 2024

STATEFUL WIDGET

StatefulWidget adalah jenis widget di Flutter yang menyimpan data internal yang dapat diubah. StatefulWidget dapat diubah secara dinamis selama runtime, dan juga dapat diperbarui ketika ada perubahan dalam data internalnya. StatefulWidget harus digunakan jika Kita memerlukan widget yang dapat diubah setelah dibangun.

Sintaks untuk membuat StatefulWidget di Flutter adalah sebagai berikut:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Counter: $_counter'),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Di atas, kelas MyWidget yang mengextend StatefulWidget, dan kelas ini memiliki metode createState() yang mengembalikan objek baru dari kelas _MyWidgetState. Kelas _MyWidgetState mengextend State<MyWidget>, di mana MyWidget adalah kelas induknya, dan ini memiliki metode build(BuildContext context) yang digunakan untuk membuat tampilan widget.

Secara umum, StatefulWidget memiliki 2 class yaitu :

• class yang mengextend StatefulWidget
• class yang mengextend State (T = class yang mengextend StatefulWidget)

Dan class yang mengextend State yang memiliki metode build yang digunakan untuk membuat tampilan widget.

PROPERTI

Beberapa properti yang dapat digunakan pada StatefulWidget di Flutter adalah sebagai berikut:

1. key: Digunakan untuk mengidentifikasi widget unik dalam hierarki widget.
2. child: Digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.
3. initialData: Digunakan untuk menentukan data awal yang akan digunakan oleh widget.
4. state: Digunakan untuk mengakses objek State yang digunakan oleh widget.
5. build: Fungsi yang digunakan untuk membuat tampilan widget.
6. didUpdateWidget: Dipanggil ketika widget diperbarui, dapat digunakan untuk melakukan aksi seperti memperbarui data internal.
7. dispose: Dipanggil ketika widget dihapus dari hierarki widget, dapat digunakan untuk membersihkan sumber daya yang digunakan oleh widget.
8. createState: Dipanggil ketika widget dibuat, digunakan untuk menciptakan objek State yang akan digunakan oleh widget.

Namun, beberapa properti diatas adalah properti yang umum digunakan pada semua jenis widget, sebagian lagi adalah properti yang spesifik pada StatefulWidget.

EXAMPLE

Properti initialData digunakan untuk menentukan data awal yang akan digunakan oleh StatefulWidget. Sintaks untuk menentukan data awal pada StatefulWidget adalah sebagai berikut:

class MyWidget extends StatefulWidget {
  final String initialText;

  MyWidget({required this.initialText});

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _text;

  @override
  void initState() {
    super.initState();
    _text = widget.initialText;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(_text),
    );
  }
}

Di atas, kelas MyWidget yang menerima parameter initialText pada constructor-nya. Kemudian di kelas _MyWidgetState, kami menggunakan widget.initialText untuk menentukan nilai awal dari _text.

Kita dapat menggunakan properti initialData pada constructor dari class yang mengextend StatefulWidget, dan mengambil data ini di kelas yang mengextend State dengan mengakses widget.initialData pada method initState atau di method lain yang sesuai.