Perbedaan StatelessWidget dan StatefulWidget

Widget adalah komponen dasar pada flutter, dan memang ini ditekankan oleh flutter. Disetiap widget, selalu ada context yang merepresentasikan dimana widget berada. Flutter sendiri menjalankan runApp yang nantinya menjalankan framework flutter untuk membaca Widget Widget yang kita buat.

Penjelasan Widget

Jika anda mengenal react.js , react.js memiliki hal mendasar yaitu component. Sedangkan flutter sendiri memiliki hal mendasar yang dinamakan widget. Widget merupakan sebuah object yg akan di jalankan oleh framework flutter untuk membangun sebuah user interface.

Dalam flutter, kita bisa membuat custom widget dengan kerangka yangg berisikan widget-widget yang kita inginkan. Dan disini kita akan membahas dua tipe custom widget yang wajib kita ketahui untuk membuat sebuah UI, yaitu SatelessWidget dan StatefulWidget.

Penjelasan StatelessWidget

StatelessWidget adalah sebuah custom widget untuk membuat UI dengan attribute-attribute yang tidak bisa berubah/bermutasi (immutable). Mari kita coba contoh penggunaan statelessWidget, dan silakan pencet tombol run untuk melihat hasilnya

Pada contoh kode diatas. kita dapat melihat hasilnya adalah

hello world

hasil dari UI yang dirender pada kodingan diatas, tidak bisa dirubah oleh event apapun, sebab tidak ada state yang dapat merender ulang UI.

Lalu bagaimana caranya agar UI kita bisa dinamis? 

mari kita lanjutkan ke penjelasan tentang statefulWidget 

Penjelasan StatefulWidget

Kali ini kita akan membahas apa itu StatefullWidget, kenapa perlu dan bagaimana cara penggunaannya.

StatefullWidget merupakan sebua object class yang diapat kita gunakan untuk membuat User Interface (antarmuka) yang dinamis dan dapat berubah-ubah bedasarkan event dan keinginan kita. Mari kita lihat contoh di bawah.

Nah, pada contoh kode diatas, jika kita run, kita dapat membuat sebuah UI yang bisa berubah bedasarkan button + , untuk menambah nilai yang ditengah. Silakan dicoba.

mari kita lihat penjelasan gambar di bawah dan kita bedah kodenya.

Penjelasan (poin penting ada pada nomor 5 sampai 14)

1. runApp(MyApp()) :Merupakan sebuah method untuk menjalankan aplikasi kita
2. StateLessWidget: Merupakan salah satu turunan widget yg statis seperti yang sudah saya jelaskan disini
3. Widget build(BuildContext context) : Merupakan method yg selalu dipanggil oleh framework flutter untuk merender UI dalam anak turunan widget
4. MaterialApp(): Merupakan salah satu widget yang disediakan flutter untuk membuat sebuah aplikasi material.
5. class HomePage extends StatefulWidget : Merupakan custom widget kita untuk membuat class StatefulWidget.
6. final String title : Merupakan parameter title yang diisi oleh constructor
7. const MyHomePage({}) : Constructor
8. createState() : Merupakan lifecycle yang wajib ditulis untuk membuat StatefulWidget.
9. _MyHomePageState extends State : Merupakan object / class untuk kita mulai membuat UI dan mengoperasikan State
10. void _incrementCounter() : Merupakan method untuk menambah angka +1 disitu ada setState() yang merupakan cara untuk merender ulang UI.
11. Scaffold() : Merupakan salah satu widget yang disediakan flutter lebih lengkapnya disini
12. widget.title() : Merupakan cara untuk pengambilan parameter yang dilempar ke StatefulWidget.
13. widget.title() : Merupakan event klik pada tombol +

Sekian yang bisa saya jelaskan. Semoga bermanfaat :)