Kita lanjutkan project sebelumnya.
Kilas Balik
Pada project sebelumnya, kita telah:
- Mencoba membuat program halo dunia pada flutter dengan kode yang sangat sederhana
- Mencoba menggunakan widget dari Material Design untuk tampilan yang lebih “android”
- Menampilkan halo dunia dengan versi Material Design
Stateless Widget
Sebelumnya juga telah disinggung bahwa (hampir) semua jenis UI pada FLutter, baik yang tampak mau pun yang tidak, semuanya adalah sebuah widget atau kumpulan dari beberapa widget.
Dan jika ditinjau dari jenisnya, widget memiliki 2 jenis: yaitu stateless widget dan stateful widget.
Apa itu stateless widget?
Stateless widget adalah widget yang hanya bertugas untuk menampilkan sesuatu secara statis. Tanpa melakukan tracking perubahan data dari waktu ke waktu.
Intinya, tampilan dari stateless widget akan seperti itu-itu saja dan tidak ada mekanisme untuk memantau state perubahan aplikasi. Itu lah kenapa ia dikatakan stateless.
Membuat Widget Stateless Baru
Untuk membuat stateless widget, kita harus membuat sebuah class baru yang meng-extends class StatelessWidget
.
Sebagai contoh, di sini kita akan membuat widget baru dengan nama TeksUtama
.
Langkah-langkahnya:
- Buka file
main.dart
- Tambahkan kode berikut terserah di paling atas (setelah
import
) atau di paling bawah:
class TeksUtama extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
}
}
Lalu pada fungsi build
, return widget Column
yang berisi dua buah teks:
- Teks Halo
- Dan teks Dunia
...
Widget build(BuildContext context) {
return Column(
children: [
Text(
'Halo',
textDirection: TextDirection.ltr,
),
Text(
'Dunia',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 45,
fontWeight: FontWeight.bold,
color: Colors.red
),
)
],
);
}
...
Pada fungsi main()
, kita ganti atribut/argumen body
dari Text
menjadi TeksUtama()
(yaitu widget berbasis stateless yang telah kita buat sendiri).
...
body: Center(
child: TeksUtama(),
),
...
Coba jalankan aplikasi, jika tidak ada error harusnya sekarang kita mendapatkan output seperti berikut:
Parameter Widget
Kembali lagi ke class TeksUtama
. Sebelum fungsi build
, tambahkan kode program berikut:
...
class TeksUtama extends StatelessWidget {
final String teks1;
final String teks2;
TeksUtama({ this.teks1, this.teks2 });
@override
Widget build(BuildContext context) {
...
}
}
Lalu pada fungsi build()
, ganti:
- string
"Apa kabar"
menjaditeks1
- dan string
"Dunia"
menjaditeks2
.
...
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
teks1,
textDirection: TextDirection.ltr,
),
Text(
teks2,
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 45,
fontWeight: FontWeight.bold,
color: Colors.red
),
)
],
);
}
...
Pada fungsi main()
, widget Scaffold
, pada argumen/atribut body
, kita ubah pemanggilan TeksUtama()
dengan menambahkan dua parameter, yaitu parameter teks1
dan teks2
.
...
body: Center(
child: TeksUtama(
teks1: 'Halo',
teks2: 'Dunia',
),
),
...
Ketika kita jalankan, harusnya tampilannya akan sama saja dengan sebelumnya.
Bedanya, sekarang kode program kita menjadi lebih rapi karena widget-nya sudah terkelompokkan.
Anda juga bisa menampilkan widget TeksUtama
berkali-kali seperti berikut:
...
body: Center(
child: Column(
children: [
TeksUtama(
teks1: 'Halo',
teks2: 'Dunia',
),
TeksUtama(
teks1: 'Apa kabar',
teks2: 'Budi',
),
TeksUtama(
teks1: 'Apa kabar',
teks2: 'Andi',
),
TeksUtama(
teks1: 'Apa kabar',
teks2: 'Santi',
),
]
),
),
...
Jika kita jalankan, maka outputnya adalah sebagai berikut:
Waw! Super keren kan!
Kode Program Lengkap
Kode program lengkap dari tutorial pertemuan kali ini bisa kalian akses pada link berikut: https://github.com/jagongoding-com/flutter-dasar/blob/02-stateless-widget/lib/main.dart
Kesimpulan
Setelah melakukan praktik langsung pada 2 pertemuan terakhir ini, kita bisa simpulkan:
- Semua UI pada flutter adalah widget (baik yang dhohir (terlihat) mau pun yang ghoib)
- Widget ada 2 jenis yaitu Stateless dan Stateful
- Widget stateless adalah widget yang hanya bertugas menampilkan sebuah UI tanpa tracking data
- Widget bisa menerima parameter / argumen
- Kita bisa menampilkan widget buatan sendiri berkali-kali
Pertemuan Selanjutnya
Pada pertemuan selanjutnya, insyaallah kita akan melanjutkan project ini dengan pembahasan Stateful widget: yaitu widget yang bisa men-tracking perubahan data dan mengupdate tampilan UI berdasarkan data tersebut.
Tetap stay tune ya! Jangan lupa share ke kawan-kawan kalian!
Terima kasih banyak.