Perbedaan antara Stateless dan Stateful dalam Flutter

Apa itu Stateless dan Stateful dalam Flutter

Singkatnya Stateless adalah Aplikasi yang tidak membutuhkan perubahan state atau keadaan dan Stateful adalah Aplikasi yang membutuhkan perubahan state atau keadaan

Bagaimana Konsep Mereka Berfungsi

Stateless biasanya digunakan untuk membuat bagian antarmuka yang statis atau tidak berubah. Setelah dibuat, widget ini tidak dapat mengalami perubahan. Ini cocok digunakan untuk bagian-bagian tampilan yang tidak memerlukan pembaruan berdasarkan interaksi atau perubahan keadaan. Stateless menggambarkan bagian-bagian yang stabil dan tidak dinamis dari antarmuka pengguna.

Sementara itu, Stateful dirancang untuk menangani keadaan atau state yang dapat berubah. Widget ini memiliki dua bagian, yaitu widget itu sendiri dan objek State yang dapat berubah. Keadaan disimpan dalam objek State, dan ketika terjadi perubahan, widget ini dapat diperbarui secara dinamis sesuai dengan keadaan terkini. StatefulWidget sering digunakan ketika ada elemen di antarmuka pengguna yang memerlukan respons terhadap interaksi pengguna atau pembaruan data.

Jadi, secara singkat, Stateless digunakan untuk bagian antarmuka yang statis, sedangkan Stateful digunakan untuk bagian yang dinamis dan dapat berubah sesuai keadaan atau interaksi pengguna.

Contoh Perbedaan Kode Stateless Dan Stateful

Berikut merupakan contoh kodingan dari stateless

    import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contoh StatelessWidget'),
        ),
        body: Center(
          child: Text(
            'Halo, ini adalah contoh StatelessWidget!',
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

    

Dan ini adalah hasil kodingan diatas

kita membuat kelas Flutter yang disebut HomePage yang mewarisi StatelessWidget. Dalam konteks stateless, "state" merujuk pada keadaan atau data yang dapat berubah di dalam suatu widget.

Pada StatelessWidget, elemen-elemen antarmuka pengguna yang didefinisikan di dalam metode build tidak dapat mengalami perubahan setelah widget tersebut dibuat. Dengan kata lain, tidak ada keadaan internal di dalam widget ini yang dapat diubah setelah widget ini dirender pertama kali.

Contoh ini adalah bagian teks dalam widget Text di dalam Center. Meskipun teks ini ditampilkan dalam antarmuka pengguna, kita tidak dapat mengubahnya tanpa membuat instance baru dari HomePage dan merendernya kembali.

Dengan kata lain, jika kita ingin mengganti teks "Halo, ini adalah contoh StatelessWidget!" dengan teks lain atau melakukan perubahan lainnya, kita harus membuat widget HomePage baru dengan nilai yang berbeda.

Dan berikut merupakan contoh kodingan stateful

   import 'package:flutter/material.dart';
 
void main() {
  runApp(MyStatefulWidget());
}
 
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
 
class _MyStatefulWidgetState extends State {
  int clickCount = 0;
 
  void incrementCounter() {
    setState(() {
  	clickCount++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
  	home: Scaffold(
    	appBar: AppBar(
      	title: Text('Contoh StatefulWidget'),
    	),
    	body: Center(
      	child: Column(
        	mainAxisAlignment: MainAxisAlignment.center,
        	children: [
          	Text(
            	'Jumlah Klik:',
            	style: TextStyle(fontSize: 18),
          	),
          	Text(
            	'$clickCount',
            	style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
          	),
        	],
      	),
    	),
    	floatingActionButton: FloatingActionButton(
      	onPressed: incrementCounter,
      	tooltip: 'Tambah Klik',
      	child: Icon(Icons.add),
    	),
  	),
    );
  }
}

    

Dan ini hasil kodingan diatas

Ketika kita klik tombol dipojok kanan angka tersebut angka bertambah/ berubah

Dan seterusnya

Mungkin kamu bertanya kenapa itu bisa terjadi? Okk simak penjelasanya

Dalam aplikasi di atas, ketika Anda klik tombol, angka bertambah karena kita menggunakan StatefulWidget dan fungsi setState(). Nilai clickCount awalnya 0, dan setiap klik memicu pembaruan nilai tersebut. Fungsi setState() memberi tahu Flutter bahwa ada perubahan keadaan, sehingga tampilan antarmuka pengguna diperbarui sesuai nilai clickCount yang baru. Ini menjelaskan kenapa angka berubah setiap kali tombol ditekan.

Lalu kenapa kenapa angkanya mulai dari 0? Pertanyaan yang bagus jadi

Angka dimulai dari 0 karena pada saat inisialisasi, nilai awal dari variabel clickCount diatur ke 0. Saat aplikasi pertama kali dijalankan, sebelum adanya interaksi pengguna atau penekanan tombol floating, nilai clickCount diinisialisasi dengan 0.

Jadi, ketika aplikasi dimulai, tidak ada penekanan tombol yang terjadi, dan nilai awal dari clickCount tetap 0. Setiap kali tombol ditekan setelahnya, fungsi incrementCounter akan memanggil setState untuk meningkatkan nilai clickCount dan memicu pembaruan antarmuka pengguna. Oleh karena itu, angka dimulai dari 0 sebagai nilai awal dan terus bertambah setiap kali tombol ditekan.

Dan mungkin kalian berfikir angkanya bertambah atau berubah kenapa hanya ketika kita menekan tombol floating kenapa haru dia? Jadi begini prosesnya

1. Saat tombol floating ditekan, Flutter memanggil fungsi onPressed.

2. Di dalam onPressed, fungsi incrementCounter dipanggil.

3. Fungsi incrementCounter kemudian menggunakan setState untuk memberi tahu Flutter bahwa keadaan (state) berubah.

4. Melalui pemanggilan setState, Flutter menjalankan kembali metode build dan merender ulang antarmuka pengguna.

5. Dalam proses ini, nilai clickCount ditingkatkan, dan tampilan antarmuka pengguna diperbarui dengan nilai clickCount yang baru.

KAPAN KITA MENGGUNAKAN STATELESS DAN STATEFULL?

Nah kapan sihh kita menggunakan stateless atau stateful? Simak penjelasan berikut

Stateless digunakan ketika tidak ada widget yang ingin diubah, contoh dalam penggunaan SplashScreenPage, class yang berisi teks statis dll.

Sedangkan Stateful digunakan ketika ada widget yang ingin diubah, Contohnya dalam membuat HomePage, widget yang bisa di Scroll, animasi dll.

Nahh sekarang udah pahamkan perbedaan antara Stateless dan Stateful serta contoh penggunaanya, TerimaKasih SELAMAT BELAJAR!