USER INTERFACE BAGIAN

1
Oleh Muhammad Firdaus,S.T.,M.Kom
Stated Widget
Dalam Flutter, state dinyatakan sebagai informasi
yang dapat dibaca ketika suatu komponen dibuat dan
mungkin akan mengalami perubahan keadaan selama
komponen tersebut tampil dilayar.
 Stated Widget
StatelessWidget StatefulWidget
StatelessWidget adalah komponen yang StatefulWidget adalah komponen
tidak memiliki state dan digunakan untuk yang dilengkapi dengan state.
membuat tampilan yang sifatnya statis Contoh: Checkbox, Radio,
(tidak berubah). Contoh: Text, TextField, dan Slider.
RaisedButton, dan Icon.
 Kelas Turunan dari StatelessWidget Kelas Turunan dari StatefulWidget
Tidak memiliki state dan pengguna aplikasi Pengguna dapat berinteraksi dengan komponen,
tidak dapat berinteraksi secara langsung untuk mengubah nilai yang terdapat di dalam
dengan komponen. komponen bersangkutan.

Melakukan override (modifikasi) terhadap Melakukan override (modifikasi) terhadap

metode build() dan mengembalikan objek metode createState() dan mengembalikan
bertipe Widget. objek bertipe State.

Digunakan untuk membuat tampilan statis. Digunakan untuk membuat tampilan dinamis.

-
Ketika statis (keadaan) pada suatu komponen
berubah, maka objek akan memanggil metode
setState() untuk menggambar ulang
tampilan baru.
 MENGGUNAKAN StatefulWidget
• Untuk membuat aplikasi dengan tampilan layar yang bersifat dinamis,
kita perlu mendefinisikan dua kelas, yaitu StatefulWidget dan kelas
generik State.
• Dalam kelas pertama kita perlu melakukan modifikasi (override)
terhadap metode . Metode ini bertugas untuk membuat objek dari kelas
kedua dan mengembalikan objek tersebut sebagai hasil metode.
 MENGGUNAKAN StatefulWidget
class Home extends StatefulWidget {
// ...
HomeState createState() {
return HomeState();
}
}
Atau bisa juga  (selanjutanya)
 MENGGUNAKAN StatefulWidget
class Home extends StatefulWidget {
// ...
@override
HomeState createState() => HomeState();
}
Pada contoh diatas, HomeState adalah nama kelas kedua. Dalam kelas
kedua, kita perlu melakukan override terhadap metode build() untuk
membangun tampilan layar menggunakan komponen-komponen tertentu seperti
contoh selanjutnya.
 MENGGUNAKAN StatefulWidget
class HomeState extends State<Home> {
// ...
@override
Widget build(BuildContext) {
// ...
}
}
Contoh di slide selanjutnya akan menunjukkan konsep dasar
pembuatan aplikasi yang memiliki tampilan layar dinamis
MENGGUNAKAN StatefulWidget
 MENGGUNAKAN StatefulWidget
Pada contoh tadi, kita menempatkan 1 komponen Text dan 2 komponen RaisedButton ke dalam
layar.
 MENGGUNAKAN StatefulWidget
Teks yang terdapat di dalam komponen Text akan berubah tergantung dari nilai variabel
counter. Untuk mengubah nilai variabel counter, kita mendefinisikan dua metode untuk
penanganan event onPressed dari objek RaisedButton pertama dan kedua.
 MENGGUNAKAN StatefulWidget
Untuk menghubungkan kedua metode Counter tadi, dengan event onPressed pada objek
RaisedButton pertama dan kedua:
 MENGATUR TATA LETAK KOMPONEN

Flutter menyediakan beberapa kelas yang dapat dijadikan

sebagai container dan berfungsi untuk mengaatur tata-letak
(layout) atau menyusun komponen. Kelas-kelas yang umum
digunakan adalah Row, Column, ListView, dan
GridView.
 MENGGUNAKAN KELAS Row
Kelas Row akan menyusun komponen-komponen yang terdapat di dalamnya dengan
susunan horisontal

Komponen 1 Komponen 2 Komponen 3 Komponen 4 Kontainer

Row(
Childern: <Widget>[
// komponen 1,
// komponen 2,
// komponen 3,
// ...
]
)
MENGGUNAKAN KELAS Row
 Disisipkan container untuk
menentukan jarak, agar
keempat komponen tidak saling
menempel.
 MENGGUNAKAN KELAS Row
Properti mainAxisAlignment pada kelas Row berfungsi
untuk menentukn posisi komponen-komponen pada saat ditampilkan
ke layar. mainAxisAlignment.center akan
menyebabkan container ditampilkan pada posisi tengah (untuk
arah horisontal)
 MENGGUNAKAN KELAS Row
Jika posisi container ingin diatur untuk arah vertical, gunakan
properti crossAxisAlignment.
Row
Main Axis

Cross
Axis
 Kelas Column berfungsi untuk menyusun komponen-
komponen yang terdapat di dalamnya secara vertikal.

MENG- Komponen 1
GUNAKAN Komponen 2
KELAS
Komponen 3 Kontainer
Column
Komponen 4

Komponen 5
 Column(
Childern: <Widget>[
// komponen 1,
// komponen 2,
MENG- // komponen 3,
GUNAKAN // ...
]
KELAS )
Column Contoh ada di slide
selanjutnya
MENG-
GUNAKAN
KELAS
Column
MENG-
GUNAKAN
KELAS
Column
 Pada kelas Column, properti
mainAxisAlignment berfungsi untuk mengatur
posisi container secara vertikal, sedangkan
crossAxisAlignment berfungsi sebaliknya
MENG- (horisontal).
Cross Axis
GUNAKAN
KELAS Column
Column Main
Axis
 MEMADUKAN KELAS Row & Column
• Pada kasus nyata dalam pembuatan aplikasi mobile, sususan komponen
yang terdapat di dalam layar, biasanya dibuat dengan memadukan
penggunaan Row & Column.
• Dalam satu container Row, bisa terdapat beberapa container Column.
Contoh:
Di slide selanjutnya 
 MEMADUKAN KELAS Row & Column
• Source Code di slide sebelumnya, membentuk susunan seperti berikut:

Row

Column 1 Column 2 Column 3

• Satu container Column, juga dapat memiliki beberapa container Row,

seperti di slide selanjutnya 
MEMADUKAN KELAS Column & Row
 Row 1

Row 2

Row 3

Column
 MEMADUKAN KELAS Row & Column
• Contoh aplikasi di slide selanjutnya menunjukkan penyusunan komponen di
dalam layar menggunakan Row dan Column. Pada aplikasi ini, kita
akan menggunakan gambar. Untuk keperluan ini, siapkan file gambar dan
tempatkan di dalam direktori nama_aplikasi/gambar.
 MENAMBAH GAMBAR DI pubspec.yaml

• Dalam file pubspec.yaml. Ubah kode pada bagian assets

seperti di slide berikut ini.
 MENAMBAH GAMBAR DI pubspec.yaml
• Ubah kode pada bagian assets seperti berikut:
MEMADUKAN KELAS Row & Column
Selanjutnya di main.dart .......
 MENGATUR JARAK KOMPONEN
• Pada saat menyusun komponen-komponen yang terdapat di dalam
suatu container, kadang kita membutuhkan jarak atau ruang
kosong untuk memisahkan komponen satu dengan komponen lain.
Untuk menangani permasalahan ini, kita dapat memanfaatkan
kelas container.
• Kelas container digunakan untuk menambah margin, padding, dan
dekorasi lain (tebal bingkai dan warna latar).
 MENGATUR JARAK KOMPONEN
• Properti margin berfungsi untuk mengatur jarak antara
container yang dibuat dengan komponen lain yang berada di atas
atau sebelahnya.
• Padding berfungsi untuk mengatur jarak antara tepi container
dengan komponen yang berada di dalam container.
• Pada saat membuat container, kita juga dapat mengatur border
yang terdapat dalam kelas BoxDecoration.
MENGATUR JARAK KOMPONEN
MARGIN
BORDER
PADDING

CONTENT
 EdgeInsets.all()

Metode EdgeInsets.all() digunakan untuk mengatur

margin maupun padding di seluruh sisi container. Berikut contoh
aplikasi yang menunjukkan penggunaan metode
EdgeInsets.all() yang diisikan untuk properti margin dan
padding pada kelas container, di slide berikut ini.
EdgeInsets.all()
 EdgeInsets.only()
Berbeda dengan EdgeInsets.all(), metode ini digunakan jika
kita hanya ingin mengatur margin atau padding pada sisi-sisi tertentu
saja.
Container(
margin: const EdgeInsets.only(top: 50),
padding: const EdgeInsets.only(left:70, right:10),
// ...
)
 EdgeInsets.only()
EdgeInsets.only(top: 7, right: 7, left: 7, bottom: 7)
Sama dengan
EdgeInsets.all(10)

Berikut contoh aplikasinya di slide selanjutnya 

EdgeInsets.only()