Scribd
Unggah
70 tayangan

Flutter Widget State

Dokumen tersebut memberikan penjelasan tentang stateful widget di Flutter. Stateful widget memungkinkan state-nya berubah, sehingga dapat bersifat dinamis dan memiliki interaksi yang tidak terbatas. Langkah-langkah membuat stateful widget dijelaskan, termasuk membuat class turunan stateful widget, menambahkan AppBar, Column, Text, dan ElevatedButton untuk menampilkan dan mengubah ukuran font saat tombol ditekan. Penugasan adalah menamb

Diunggah oleh

Naoo
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
70 tayangan

Flutter Widget State

Dokumen tersebut memberikan penjelasan tentang stateful widget di Flutter. Stateful widget memungkinkan state-nya berubah, sehingga dapat bersifat dinamis dan memiliki interaksi yang tidak terbatas. Langkah-langkah membuat stateful widget dijelaskan, termasuk membuat class turunan stateful widget, menambahkan AppBar, Column, Text, dan ElevatedButton untuk menampilkan dan mengubah ukuran font saat tombol ditekan. Penugasan adalah menamb

Diunggah oleh

Naoo
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

SMKN 8 KOTA MALANG

Mata Pelajaran :
PWPB Bid. Keahlian :
Pertemuan : Rekayasa Perangkat Lunak
Flutter Widget State
Guru :
Kelas/Semester : XII/1
Muhammad Reyhan

A. Dasar Teori
 State
State merupakan data yang ada pada suatu widget. State dibagi menjadi dua jenis yaitu Stateless
dan juga Stateful
 Stateless Widget
Stateless widget merupakan widget yang nilai state-nya tidak dapat berubah, sehingga widget
bersifat lebih statis dan memiliki interaksi yang terbatas
 Stateful Widget
Stateful widge merupakan kebalikan dari stateless widget, dimana stateful widget dapat berubah-
ubah statenya, sehingga dapat bersifat lebih dinamis dan dapat memiliki interkasi yang tidak
terbatas.
B. Langkah Kerja
Membuat Stateless Widget
Sebenarnya pada pertemuan sebelumnya kita sudah menggunakan stateless widget, dan kita hanya
perlu menambahkan sedikit penambahan pada source code kita yaitu membuat text kita sebagai
konstan dengan cara menambahkan kata kunci const sebelum widget text sehingga menjadi seperti
ini
Membuat Stateful Widget
1. Pertama-tama bukalah visual studio code kalian dan buatlah package baru
2. Setelah package terbuat, kalian dapat membuka file main.dart pada folder lib, kemudian kita
akan menghapus semua kode yang terdapat dibawah fungsi main, sehingga kode akan menjadi
seperti ini.

3. Kemudian kita dapat menambahkan class yang menjadi turunan stateful widget dengan cara
ctrl + spacebar dan ketikkan stf dan pilihlah stateful widget dan seperti pada pembuatan
stateless widget sebelumnya, kita akan menggantikan nama class dan lainnya menjadi MyApp
sehingga kode akan menjadi seperti berikut ini:
4. Kemudian ganti widget Container dengan widget MaterialApp()
5. Masukkan properti home: , dan juga widget Scaffold di dalam property home, sehingga source
code akan menjadi seperti ini

6. Kemudian didalam widget scaffold, kita akan menambahkan properti appbar untuk mengatur
bagian appbarnya, yang mana pada properti appbar kita juga akan menambahkan widget
AppBar sehingga kode akan menjadi seperti ini
7. Pada widget appbar kita akan menambahkan properti title yang berisikan widget text untuk
mengatur judul dari pada appbar, sehingga kode akan menjadi seperti ini

8. Kemudian kita keluar dari widget appbar, dan kemudian tambahkan property body, yang
berisikan widget column, sehingga kode akan menjadi seperti ini

9. Kemudian buatlah sebuah variabel double dan berikan nilai 12.0


10. Kemudian kembali lagi pada widget column, kita akan menambahkan properti children
sehingga kode akan menjadi seperti ini

11. Dan pada kolom, children kita akan menambahkan sebuah widget text seperti ini dan berikan
style untuk mengatur font sizenya
12. Kemudian kita akan menambahkan sebuah button dengan menggunakan widget elevated
button sehingga kode akan menjadi seperti ini.

13. Kemudian kita akan membuat fungsi untuk mengatur logika penambahan font dengan cara
menambahkan fungsi yang berisikan sebuah fungsi setState dan isi fungsi sebagai berikut
14. Dan kemudian kita akan mengatur isi dari properti onPressed untuk memanggil fungsi
tambahFontSize dan juga mengatur property child untuk mengatur apa isi dari tombol tersebut
dengan memanfaatkan widget text sehingga kode akan menjadi seperti ini

15. Dan coba untuk jalankan file tersebut dan coba untuk klik tombol tersebut dan lihat apakah
ukuran font akan bertambah
C. Penugasan
Buatlah satu tombol tambahan untuk mengurangi font size

Anda mungkin juga menyukai