04.Flutter - Stateful Widget


StatefulWidget

Stateful Widget digunakan ketika bagian dari UI menampilkan data yang dinamis (berubah), misalnya pada kalkulator, tampilan layar pada kalkulator adalah Stateful karena angka-angka yang ditampilkan berubah-ubah, sementara tombol pada kalkulator adalah Stateless, karena tampilan dari tombol pada kalkulator tidak berubah. Minimum kode untuk Stateful Widget adalah sebagi berikut:


class StatefulApp extends StatefulWidget {
  StatefulApp({Key key}) : super(key:key);
  
  @override
  _StatefulAppState createState() => _StatefulAppState();
}

class _StatefulAppState extends State<StatefulApp> {
  @override
  Widget build(BuildContext context) {
    return <kode widget disini>;
  }
}

Jika kita lihat minimum kode diatas, untuk membuat Stateful Widget terdiri dari dua buah kelas, satu kelas meng-extends StatefulWidget dan kelas lainnya mengextends State, perhatikan gambar berikut dimana kelas pertama meng-extends StatefulWidget:



Kelas pertama ini digunakan untuk menciptakan object bertipe State yaitu kelas kedua didalam metode 'createState', data didalam kelas ini tidak bisa dirubah (immutable), datanya bersifat final dan nilainya diberikan melalui konstruktor, sama seperti StatelessWidget, kelas ini dibuang dan digantikan ketika ada perubahan data dan Widget baru perlu dibuat ulang.




Kelas kedua ini melakukan pekerjaan lebih banyak dari kelas pertama, data pada kelas kedua dapat berubah (mutable), metode 'build' digunakan untuk membangun UI-nya, dapat merespon event seperti click/tap pada tombol, dll. Perubahan data dilakukan dengan metode 'setState' dan hal ini membuat UI akan dibuat ulang, kode didalam kelas ini dapat mengacu ke kelas pertama menggunakan varibel 'widget'.

Pada saat kita membuat Stateful Widget, maka hal ini yang terjadi:

  • instance dari kelas pertama (yang meng-extends StatefulWidget) akan dibuat.
  • lifecycle metode 'createState' dari kelas pertama akan dipanggil (invoke) oleh flutter untuk menciptakan instance kelas kedua.
  • instance dari kelas kedua (yang meng-extends State) dibuat.
  • metode build dari kelas State (yang di @override kelas kedua) dipanggil untuk membuat UI.

Stateful Widget menghasilkan UI-nya didalam metode 'build' dimana hasilnya akan dirender oleh Flutter (metode 'build' tedapat pada kelas kedua, kelas yang meng-extends state), data pada saat membuat UI dapat diambil dari variabelnya sendiri atau dari sumber lainnya, Stateful Widget dapat memaksa untuk melakukan render ulang, pada saat metode 'setState' dipanggil didalam kelas State, ini akan menyebabkan pembuatan ulang UI, hal ini dikarenakan Flutter akan memanggil kembali metode 'build', jika kita melihat kode bawaan flutter pada saat membuat project baru, maka kita akan melihat metode 'setState' untuk menaikkan counter, dan ketika tombol counter ditekan maka UI akan diupdate dengan data terbaru, perhatikan potongan kodenya:

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

LifeCycle Metode

Kelas pertama - kelas yang meng-extends StatefulWidget

createState()
Flutter memanggil metode ini, kita menambah kode disini untuk instance dari kelas State (kelas kedua)

Kelas kedua - kelas yang meng-extends State

build()
Flutter memanggil metode ini ketika widget perlu untuk dibuat ulang.

initState()
Flutter memanggil metode ini ketika widget diciptakan, setelah construktor

didChangeDependencies()
Flutter memanggil metode ini ketika Flutter mendeteksi ada perubahan data dari sumber lainnya, yang kemungkinan berpengaruh ke UI dan menyebabkan dipanggilanya metode 'build', metode ini tidak dijalankan ketika metode 'setState' dijalankan untuk memuat ulang UI.

didUpdateWidget()
Flutter memanggil metode ini ketika membuat StatefulWidget kelas pertama dan menggantinya dengan StatefulWidget kelas pertama dari tipe yang sama tetapi dengan data yang telah diperbaharui.

setState()
Kita memanggil/menggunakan metode ini untuk memberikan nilai (set state) ke Widget dan memastikan UI dibuat ulang menggunakan metode 'build'.

deactivate()
Jarang digunakan. Flutter memanggil metode ini ketika State dihapus dari tree.

dispose()
Flutter memanggil metode ini ketika objek State dihancurkan.

Untuk lebih mendalami lagi bisa mengunjugi link berikut ini https://www.didierboelens.com/2018/06/widget---state---context---inheritedwidget/

Contoh Program.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  MyApp() {
    debugPrint("MyApp Constructor - " + hashCode.toString());
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key) {
    debugPrint("MyHomePage Constructor - " + hashCode.toString());
  }
  final String title;

  @override
  _MyHomePageState createState()  {
    debugPrint("MyHomePage Metode createState - " + hashCode.toString());
    return _MyHomePageState();
  } 
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  _MyHomePageState() {
    debugPrint("_MyHomePageState Constructor - " + hashCode.toString());
  }

  @override
  void initState() {
    debugPrint("_MyHomePageState initState - " + hashCode.toString());
  }

  @override
  void didChangeDependencies() {
    debugPrint("_MyHomePageState didChangeDependencies - " + hashCode.toString());
  }

  @override
  void didUpdateWidget(Widget oldWidget) {
    debugPrint("_MyHomePageState didUpdateWidget - " + hashCode.toString());
  }

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

  @override
  Widget build(BuildContext context) {
    debugPrint("_MyHomePageState metode build - " + hashCode.toString());
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

04.Flutter - Stateful Widget 04.Flutter - Stateful Widget Reviewed by jc on July 22, 2019 Rating: 5

No comments:

Powered by Blogger.