Apa Itu Stateful dan Stateless Widget Flutter

0
737
Apa Itu Stateful dan Stateless Widget Flutter
Apa Itu Stateful dan Stateless Widget Flutter

Dalam flutter semua komponen disebut dengan Widget. Widget memiliki dua tipe Widget yaitu Stateful Widget dan Stateless Widget. Lalu apa perbedaan Stateful dan Stateless Widget pada aplikasi Flutter?

Apa itu Stateless Widget ?

Stateful Widget adalah Merupakan widget yang di-build hanya dengan konfigurasi yang telah di initialkan sejak awal dan tidak pernah berubah.
Misalnya Kita membuat aplikasi berisi Text dengan Hello World. Kemudian aplikasi kita tidak bisa untuk merubah kata tersebut. Maka yang digunakan adalah Stateless Widget.

Class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Stateless Widget'),
            ),
            body: Center(
                child: Text(
                    'Hello World',
                    style: TextStyle(
                        fontSize: 30
                    ),
                ),
            )
        );
    }
}

Apa itu Stateful Widget ?

Stateful adalah widget yang dapat berubah dinamis. Jadi apapun Widget yang berubah, ya itu disebut dengan Stateful Widget. bisa di ibaratkan Stateful widget adalah sebuah gelas, isi gelas bisa di isi dengan air putih atau pun secangkir kopi hitam.

Contohnya kita membuat sebuah aplikasi dimana jika setiap kita memencet tombol “+1”. Angka yang ada di tengah tampilan akan bertambah satu.

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Stateful'),
            ),
            body: Container(
                child: HitungScreen(),
            )
        );
    }
}

class HitungScreen extends StatefulWidget {
  @override
  _NumberScreenState createState() => _HitungScreenState();
}

class _HitungScreenState extends State {
    int number = 10;

    @override
    Widget build(BuildContext context) {
        return Stack(
            children: [
                Center(
                    child: Text(
                        this.number.toString(),
                        style: TextStyle(
                            fontSize: 30
                        ),
                    ),
                ),
                Positioned(
                    bottom: 50,
                    right: 50,
                    child: FloatingActionButton(
                        child: Icon(Icons.plus_one),
                        onPressed: () {
                            setState(() {
                                this.number += 1;
                            });
                        },
                    ),
                )
            ],
        );
    }
}

Fungsi untuk merubah number pada koding diatas berubah karena adanya fungsi setState(). setState fungsinya untuk memberitahu framework bahwa ada object yang berubah pada State, kemudian akan melakukan build ulang pada Widget tersebut.