Pertemuan 2

Pemrograman Perangkat Bergerak

Pengenalan Widget

D3 Teknik Informatika
Widget
• Sebagian besar komponen
yang ada pada Flutter sebut
sebagai widget.
• “Flutter is all about widget.”
• Text sendiri adalah widget,
dan Button juga widget.
• Selain itu widget juga dapat
dibangun dari kumpulan
beberapa widget.
Definisi Widget
• Konsep Widget pada Flutter itu terinspirasi oleh salah satu framework JavaScript yang digunakan
untuk membangun sebuah website yaitu ReactJS. ReactJS memiliki konsep Component
• Mari kita analogikan dengan mainan Lego! Di Lego terdapat block-block kecil yang nantinya kita
susun untuk membangun sebuah istana Lego. Berarti component dalam programming adalah
sekumpulan block-block code yang digunakan untuk membangun sebuah aplikasi.
• Widget sama halnya dengan component yang merupakan kumpulan block code untuk membangun
aplikasi Flutter. Ketika membangun aplikasi Flutter kita harus berpikir layaknya bermain Lego. Kita
harus bisa membuat dan menyusun widget-widget dengan tepat. Tujuannya, agar aplikasi yang kita
buat lebih mudah untuk dikembangkan.
Contoh Penggunaan Widget
• Widget MyApp dan telah menggunakan widget-widget
bawaan Flutter di antaranya MaterialApp, Scaffold, Center,
dan Text.
• Ketika menggunakan widget, kita tinggal panggil nama widget
dan bila ada properti atau parameter pada widget tersebut
tinggal kita isikan properti atau parameternya.

• Widget Center ini digunakan untuk membuat widget yang ada

di dalamnya berada di posisi tengah (mirip seperti alignment
center). Tinggal ketikkan Center lalu tambahkan properti child
di dalamnya.
Contoh Penggunaan Widget
• Perlu diketahui bahwa sebagian besar widget bawaan memiliki pola parent-child, seperti halnya
Center yang memiliki child yang artinya di dalam child bisa terdapat widget lagi. Maka penulisan
parent child akan seperti di bawah ini.

• Pada contoh di atas widget Center dan Button hanya dapat memiliki satu anak atau bisa disebut
child. Ada pula widget yang dapat memiliki banyak anak atau bisa disebut children, seperti Row,
Column, ListView, GridView, dan semacamnya.
State
• State adalah data yang ada pada suatu widget. Widget menyimpan data yang nantinya dapat
berubah sesuai interaksi pengguna.
• Karena Flutter menggunakan paradigma OOP (Object-Oriented Programming), state biasanya
menjadi suatu properti dari sebuah class.

• Variabel _judul di atas merupakan contoh pendeklarasian state pada suatu widget
StatelessWidget
• StatelessWidget adalah widget yang nilai state-nya tidak
dapat berubah (immutable) maka widget tersebut lebih
bersifat statis dan memiliki interaksi yang terbatas.

• Sesuai definisi StatelessWidget, state-nya tidak dapat berubah

(immutable), maka state yang ada di dalam kelas tersebut
harus dibuat final. Nilainya hanya dapat diisi melalui
constructor class-nya.
StatefullWidget
• StatefulWidget → widget yang state-nya dapat
berubah-ubah nilainya, yang berarti
StatefulWidget bersifat dinamis dan memiliki
interaksi yang tak terbatas.
• Seperti yang kita lihat, penulisan
StatefulWidget lebih panjang. Tetapi yang
harus diperhatikan adalah properti dari setiap
class-nya. Pada class ContohStateful
propertinya hanya berupa parameter ketika
memanggil ContohStateful, parameter tersebut
tidak wajib ada. Sedangkan pada class
_ContohStatefulState, properti merupakan state
yang sebenarnya. Kita akan mengubah nilai .
StatefullWidget
• Contoh StatefulWidget sederhana:
• Letakkan kode di atas setelah StatelessWidget Heading
yang telah kita buat sebelumnya lalu panggil StatefulWidget
BiggerText pada MyApp.

……..
StatefullWidget
• Ketika tombol "Perbesar" ditekan, text "Hello world!" akan membesar
karena state _textSize diubah nilainya. Mengubah nilai state harus
dilakukan pada fungsi setState seperti berikut:
Widget - Widget Umum
• Scaffold
• AppBar
• Body
• FloatingActionButton
Scaffold
• Scaffold merupakan sebuah widget yang
digunakan untuk membuat tampilan dasar
material design pada aplikasi Flutter, yang
dapat disebut juga dasar sebuah halaman
pada aplikasi Flutter.
• Gambar disamping merupakan
implementasi dari Scaffold. Scaffold rsebut
memiliki 3 bagian yaitu AppBar, Body, dan
FloatingActionButton. Ketiga bagian tersebut
diilustrasikan seperti beriku
• kotak berwarna merah merupakan AppBar;
kotak berwarna hijau merupakan body; dan
kotak berwarna biru merupakan
FloatingActionButton.
AppBar
• AppBar merupakan Header (bagian paling
atas) aplikasi atau biasa dikenal dengan
toolbar. Pada AppBar umumnya terdapat judul
dan ActionButton.
• Menambahkan parameter pada Scaffold dan
menambahkan title pada AppBar. Title di sini
tidak hanya spesifik Text saja, melainkan juga
dapat diisi dengan widget lainnya seperti
TextField untuk kolom pencarian atau yang
lainnya.
Body
• Body merupakan bagian utama dari Scaffold
• Menambahkan body yang di dalamnya dan
memanggil widget Center yang akan
menampilkan Text "Hello World!".
FloatingActionButton
• FloatingActionButton
merupakan bagian dari
Scaffold yang digunakan
untuk menampilkan sebuah
tombol aksi yang posisinya
floating (melayang dan
posisinya tetap).
Container
• Container adalah widget yang digunakan untuk melakukan
styling, membuat sebuah shape (bentuk), dan layout pada
widget child-nya.
• Text "Hi" yang dibungkus oleh widget Container dan kita beri
parameter color dengan nilai Colors.blue. letakkan Container
di dalam parameter body.
Width & Height
• Kita dapat mengatur lebar (width) dan tinggi (height)
suatu Container
Padding & Margin
• Padding merupakan jarak antara konten
(child) dengan Container.
• Margin merupakan jarak antara Container
dengan bagian luar container.
Dekorasi Container
• Decoration merupakan bagian dari Container untuk styling.
• Pada decoration dapat menentukan warna background (solid/gradient color), shadow, border,
border radius (membulatkan sudut), mengatur shape (bentuk), dan lain-lain.
Color
• Menentukan warna background dari container
dengan decoration.
• Untuk menggunakan decoration cukup
menambahkan parameter decoration pada
Container lalu beri nilai BoxDecoration.
• Pada contoh berikut merubah warna
Container menjadi merah dengan memberi
parameter color pada BoxDecoration.
• Ada catatan penting ketika menggunakan
color pada BoxDecoration, yaitu pastikan
tidak memberi parameter color pada
Container.
Shape
• Mengatur shape (bentuk) dari Container.
• Kode berikut menambahkan parameter
shape dengan nilai BoxShape.circle.
• Artinya, bentuk dari Container tersebut
akan berbentuk lingkaran.
• BoxShape memiliki opsi circle atau
rectangle.
Shadow
• Untuk menambahkan shadow
pada Container kita akan
menambahkan parameter
boxShadow pada BoxDecoration.
• Parameter boxShadow merupakan
sebuah Array. Di dalamnya
terdapat BoxShadow yang artinya
pada Container kita dapat
memberikan banyak bayangan
atau shadow.
Border
• Border merupakan batas garis dengan
content (child)
Border
• Border yang tidak berujung
lancip cukup tambahkan
parameter borderRadius
Pada BoxDecoration
Padding
• Padding merupakan sebuah widget yang
khusus untuk memberikan padding pada suatu
widget.
• widget Padding harus memiliki child. Child di
sini merupakan sebuah widget yang nantinya
akan diberi padding.
• Parameter padding ditambahkan untuk
menentukan besaran padding yang
diinginkan.
Center
• Widget Center merupakan sebuah widget
yang digunakan untuk membuat suatu
widget berada pada posisi tengah.
• Widget Center hanya membutuhkan
parameter child untuk membuat widget di
dalamnya berada pada posisi tengah.
Row dan Column
• Pada gambar berikut memiliki tampilan ikon-ikon yang
merupakan kumpulan tombol, di antaranya share, like dan
dislike.
• Tombol-tombol tersebut tersusun berjajar secara horizontal.
• Untuk membuat berjajar horizontal atau membentuk baris
dapat menggunakan widget Row.
• Sedangkan untuk menyusun widget yang membentuk
kolom atau vertikal, dapat menggunakan widget Column.
Widget Row
• Widget Row merupakan suatu widget yang
digunakan untuk membuat widget-widget tersusun
berjajar secara horizontal.
• Untuk membuat widget-widget berjajar secara
horizontal, harus memasukkan widget-widget tersebut
ke dalam parameter children.
• Parameter children berisi kumpulan atau list dari
widget karena dapat menyusun beberapa widget
sekaligus di dalamnya.
• mainAxisAlignment yang merupakan parameter
alignment pada Row.
• Parameter mainAxisAlignment yang berfungsi untuk
mengatur alignment vertikal dari Row (alignment
utama).
• Selain itu Row juga memiliki parameter
crossAxisAlignment yang berfungsi untuk mengatur
alignment secara horizontal. Kedua parameter ini
juga berlaku sebaliknya untuk widget Column.
Widget Column
• Column merupakan suatu widget yang
digunakan untuk membuat widget-widget
tersusun berjajar secara vertikal.
• Column memiliki sintaks mirip dengan Row
Paduan Widget
• Untuk membuat
sebuah widget-
widget berjajar,
dapat
menggunakan
widget Row atau
Column.
• Penggunaan Row
dan Column dapat
dipadukan sehingga
dapat membuat
sebuah layout yang
kompleks seperti
berikut:
Praktikum Widget
• Kerjakan CODELAB 1 pada page/halaman 105 s/d 119.
• Berikan Analisa/Jelaskan komponen apa saja yang digunakan
dan sertakan potongan source code setiap komponennya.
• Buatlah Laporan PDF berisi source code dan hasil implementasi
serta penjelasan.
• Upload Laporan PDF ke Edlink.