Materi Pertemuan 6. Statefull Widget dan Stateless Widget

Hallo semua, tak terasa sudah pertemuan ke 6, semoga temen-temen mahasiswa bisa memahami materi sebelumnya. Materi kali ini kita akan membahas sedikit terkait bagaimana implementasi statefull widget dan stateless widget dua hal ini memiliki fungsi yang berbeda, tergantung kebutuhan pembuat aplikasi. Namun karena kita masih sama sama belajar, mungkin agak sedikit susah menentukan kapan pakai statefull widget dan kapan harus memakai stateless widget untuk itu mari kita simak bersama sama.

1. Apa sih Stateless Widget

Seperti pertemuan sebelumnya, saya telah menjelaskan bahwa stateless widget merupakan widget yang bersifat statis, artinya widget tersebut tidak akan pernah berubah. Makanya stateless widget biasanya telah di rancang terlebih dahulu contohnya seperti AppBar. 

Seperti gambar di atas, itu adalah contoh Appbar, AppBar yang dibuat statis artinya AppBar tidak akan pernah berubah, untuk mencobanya silahkan menggunakan kode berikut.

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

Perhatikan kode di atas

class MyApp extends StatelessWidget {
}

Stateless widget ditandai dengan kode seperti di atas, StatelessWidget. yang akan me return nilai Widget Scaffold dimana Scaffold memiliki atrribut yaitu appBar, title, body, child dan seterusnya.

2. Statefull Widget

Hal yang paling menarik dari flutter yaitu adanya Statefull Widget, karena widget ini merupakan widget yang bersifat dinami, artinya widget ini dapat berubah ubah tergantung kebutuhan. Contohnya membuat form login, membuat counter atau membuat apa saja yang nilainya bisa berubah. Dalam Statefull Widget biasnaya ditandai dengan adapanya fungsi setState () yang berfungsi untuk memberitahu bahwa objek ada yang berubah pada State. 

Contoh kode sebagai berikut : 

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

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

class _NumberScreenState extends State<NumberScreen> {
    int number = 10;

    @override
    Widget build(BuildContext context) {
        return Stack(
            children: <Widget>[
                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;
                            });
                        },
                    ),
                )
            ],
        );
    }
}

Bila dijalankan akan mirip seperti tampilan aplikasi default yang ter-Create ketika memulai flutter pertama kali.

setState() pada Stateless Widget

Selanjutnya muncul pertanyaan apakah setState() dapat digunakan pada stateless widget ?, seperti yang telah saya jelaskan bahwa setState() merupakan ciri dari statefull widget.

Kesimpulan

Secara umum, bahwa kedua widget ini memiliki fungsi dan kegunaan masing masing, bahkan bisa digunakan secara bersandingan. 

Cukup sekian dulu pembahasan kita kali ini, kurang lebihnya saya mohon maaf. 

Untuk mahasiswa saya, silahkan komentar terkait materi yang telah dipelajari.

Terimakasih.

Ahmad Subki