Nurul Huda
Nurul Huda
  1. Beranda ›
  2. Android ›
  3. Flutter ›
  4. Flutter Dasar
  5. › Flutter Stateful Widget

Flutter Stateful Widget

Flutter Stateful Widget

Daftar Isi

Kita masih akan melanjutkan project sebelumnya (lihat hasil akhir project).

Kode program dari progress terakhir bisa dilihat di link ini.

Kilas Balik

Pada 2 pertemuan sebelum ini, kita telah mempelajari:

  1. Pengertian widget pada flutter
  2. Stateless widget dan cara pembuatannya
  3. Parameter widget

Target Pertemuan Ini

Pada pertemuan ini, yang insyaallah akan kita lakukan adalah:

  1. Mengubah stateless widget menjadi stateful widget
  2. Membuat aksi ganti nama dan ganti warna ketika tombol refresh diklik

Pengertian Stateful Widget

Telah kita bahas sebelumnya bahwa widget pada flutter ada 2, kalau tidak stateless, ya stateful.

Kapan saja suatu widget bisa merespon terhadap interaksi user, dan bisa men-tracking perubahaan data, lalu merender ulang layout sesuai perubahaan data, maka ia adalah stateful. Di luar itu, maka sebuah widget adalah stateless widget.

Contoh dari stateless widget bawaan Flutter adalah: Text, Icon, IconButton, dan lain-lain.

Dan contoh dari stateful widget bawaan Flutter adalah: Checkbox, Radio, Slider, TextField, dan lain-lain.

Data atau state dari sebuah stateful widget akan disimpan pada object State, membuatnya terpisah dari bagian presentasi (atau view). Nantinya, di dalam object State ini, data akan dimanipulasi dan diubah dengan memanggil fungsi setState() [1].

Seperti biasa, agar lebih mudah memahami teori, kita akan langsung mempraktikkannya ke dalam kehidupan nyata, tentunya dengan ditemani secangkir kopi panas!! 😎

1. Persiapan

Sekali lagi, project ini masih melanjutkan project pada pertemuan sebelumnya.

Sehingga code base-nya pun juga berdasarkan progress terakhir kita.

2. Buat State

Langsung saja. Langkah pertama ini kita akan membuat sebuah state baru.

Langkah-langkahnya:

  1. Buka file lib/main.dart

  2. Rename class TeksUtama menjadi StateTeksUtama

  3. Ubah extends class dari StatelessWidget menjadi State<TeksUtama>

  4. Hapus kode program di bawah:

    final String teks1;
final String teks2;

TeksUtama({ this.teks1, this.teks2 });

  5. Lalu ganti dengan kode berikut:

    var listNama = [
  'Budi', 'Andi', 'Sari', 'Rudi',
  'Nurul', 'Huda', 'Lendis', 'Fabri'
];
var listWarna = [
  Colors.red, Colors.purple, Colors.teal, Colors.lime,
  Colors.indigo, Colors.deepPurple, Colors.cyan,
  Colors.blue, Colors.yellow
];
int index = 0;

    Pada kode di atas, kita membuat variabel baru pada kelas StateTeksUtama untuk menyimpan list nama, list warna, dan index yang akan digunakan untuk menentukan mana nama dan warna yang aktif.

3. Update Tampilan Widget

Update fungsi build pada kelas StateTeksUtama dengan mengubah:

  1. teks1 menjadi "Apa kabar"
  2. teks2 menjadi listNama[index % listNama.length]
  3. dan Colors.red menjadi listWarna[index % listWarna.length]

Perhatikan kode yang ter-highlight di bawah ini:

@override
Widget build(BuildContext context) {
 return Column(
   children: [
     Text(
       'Apa kabar',
       textDirection: TextDirection.ltr,
     ),
     Text(
       listNama[index % listNama.length],
       textDirection: TextDirection.ltr,
       style: TextStyle(
         fontSize: 45,
         fontWeight: FontWeight.bold,
         color: listWarna[index % listWarna.length]
       )
     )
   ],
 );
}

Kita telah membuat sebuah state baru dengan nama StateTeksUtama.

Kelas StateTeksUtama ini memiliki 3 buah variabel:

  • listNama
  • listWarna
  • dan index

Kelas tersebut juga mengembalikan sebuah widget (pada fungsi build()) yang mana tampilannya masih sama dengan tampilan pada pertemuan sebelumnya.

Bedanya, teks untuk nama sekarang diambil dari indeks yang aktif. Begitu juga untuk warna, juga diambil dari indeks yang aktif.

4. Membuat StatefulWidget dengan State yang Baru Kita Buat

Selanjutnya, kita akan membuat sebuah Widget baru (stateful) berdasarkan state yang sudah kita buat (yaitu kelas StateTeksUtama).

Langsung saja, kita beri nama widget yang baru ini dengan nama TeksUtama (sama seperti nama sebelumnya).

Berikut ini kode programnya:

class TeksUtama extends StatefulWidget {

  final state = StateTeksUtama();

  @override
  State<StatefulWidget> createState() => state;
}

Pada kode program di atas, kita membuat sebuah variabel dengan nama state yang merupakan instance dari kelas StateTeksUtama().

Saat pertama kali dibangun, sebuah StatefulWidget akan membuat sebuah state dengan memanggil fungsi createState().

Nah, di sini, kita langsung saja kembalikan variabel state yang telah kita inisiasi.

5. Perbaiki Widget Root Pada fungsi main()

Sejauh ini, kita telah melakukan perombakan terhadap widget TeksUtama.

Sehingga kode program kita sampai sekarang masih belum bisa dijalankan karena error.

Oleh karena itu, mari kita perbaiki dengan mengubah body dari Scaffold pada fungsi main() menjadi seperti ini:

Lihat baris yang ter-highlight

void main() {
  TeksUtama teksUtama = TeksUtama();

  runApp(
    MaterialApp(
      title: 'Halo Dunia',
      home: Scaffold(
        ...
        body: Center(
          child: teksUtama,
        ),
        ...
      )
    )
  );
}

Pada kode di atas, kita membuat sebuah variabel teksUtama, yang merupakan instance dari widget TeksUtama.

Kenapa kita inisiasi dulu seperti ini?

Tidak wajib seperti ini sih, di sini saya hanya memberikan variasi lain bahwasanya untuk menyusun UI pada flutter itu tidak kaku. Karena untuk menghasilkan output yang sama, kita bisa berkreatifitas sebebas kita 😁

Sekarang, coba jalankan aplikasi kita, harusnya kita akan mendapatkan output sebagai berikut:

Anda bisa bereksperimen dengan mengubah-ubah nilai index menjadi angka berapapun.

Angka 1, 2, 10, 35, 95, 99.

Lalu jalankan lagi aplikasi, anda akan menemukan bahwa teks nama dan warnanya akan berubah 😁

6. Fungsi Increment

Oke, step terakhir kita adalah:

  • Mengubah state (variabel index) ketika tombol refresh diklik

Stepnya:

  1. Pada kelas StateTeksUtama, tambahkan fungsi incrementIndex() seperti di bawah:

    void incrementIndex () {
  setState(() {
    index++;
  });
}

  2. Dan pada fungsi main(), atribut Scaffold.floatingActionButton, isi nilai onPressed menjadi teksUtama.state.incrementIndex.

    Perhatikan kode program yang ter-highlight berikut ini:

    void main() {
  TeksUtama teksUtama = TeksUtama();

  runApp(
    MaterialApp(
      title: 'Halo Dunia',
      home: Scaffold(
        ...
        body: Center(
          child: teksUtama,
        ),
        floatingActionButton: FloatingActionButton(
          tooltip: 'Refresh',
          child: Icon(Icons.refresh),
          onPressed: teksUtama.state.incrementIndex,
        ),
      )
    )
  );
}

Jalankan lagi aplikasi kita.

Lalu coba tekan tombol random, dan voila! Tulisan nama dan warnanya akan berubah-ubah 😎

Kode Program Lengkap

Anda bisa mendapatkan kode program lengkap dari tutorial kali ini pada file github ini.

Apakah best practice?

Sebenarnya ini tidak terlalu best practice, karena kita memanggil state dari luar widget.

Tapi karena ini masih aplikasi pertama kita di flutter, hal seperti ini tidaklah mengapa. Insyaallah pada tutorial-tutorial selanjutnya akan kita buat yang lebih bagus lagi. Semangat 💪💪

Langkah Selanjutnya

Aplikasi yang kita bangun sejauh ini telah berfungsi.

Akan tetapi tampilannya masih sangat seadanya.

Oleh karena itu, pada pertemuan berikutnya, insyaallah kita akan membahas tentang Container pada Flutter.

Stay tune!

Jangan lupa share ke teman-temanmu ya! Terima kasih banyak.

Referensi

[1] https://flutter.dev/docs/development/ui/interactive

Belajar Ngoding di Udemy