Universitas Pamulang

Penggunaan Widget
Pada Flutter

SISTEM INFORMASI
 Apa itu Widget ?
Flutter seluruh tampilan seperti tombol, gambar, teks, list, ikon,
bahkan satu layar pada handphone tersebut merupakan
sekumpulan dari banyak widget.

Properti pada Widget

Membuat aplikasi dengan tampilan yang
cantik, terstruktur, multi platform, dan Setiap widget memiliki property, misalnya kita membuat sebuah
interaktif dengan mudah merupakan tombol, lalu kita ingin agar warna backgroundnya itu hijau, dan
kelebihan Flutter karena secara default warna tulisannya putih, lalu teksnya kita tebalkan.
Flutter menggunakan Material Design. Untuk melakukan itu semua, maka tombol kita atur melalui
propertinya.
Dari gambar tersebut kita bisa pelajari bahwa ciri dari widget dia diawali dengan huruf kapital dia berupa class,
digambar itu juga kita memiliki widget Scaffold, AppBar, dan Teks.

Lalu widget Scaffold dia memiliki property appBar, sedangkan pada widget AppBar dia memiliki property
title, dan backgroundColor.
Widget di dalam widget
Pada Flutter setiap Widget umumnya memiliki properti child atau anak,
dari properti inilah kita bisa menggunakan widget didalamnya.
Selain child, kita juga mengenal property children yang artinya anak-anak, sesuai dengan namanya, berarti
widget tersebut bisa memiliki banyak widget-widget, sebagai contoh kita ingin menampilkan daftar menu
makanan, maka tentu akan banyak widget yang berfungsi untuk menampilkan keterangan nama makanan
didalamnya.
General Widget
Scaffold
Scaffold adalah widget utama untuk
membuat sebuah halaman pada flutter,
scaffold ini memiliki beberapa parameter
yang biasa kita gunakan seperti appBar
untuk membuat AppBar, body untuk
bagian tubuhnya, atau kita juga bisa
menambahkan floating action bar,
maupun mengganti warna background
bodynya.
Contoh Scaffold
 •Stateless Widget adalah widget yang berfungsi untuk menampilkan
hal-hal yang sifatnya statis mudahnya setelah data ditampilkan maka
kita tidak akan merubahnya lagi.
Stateless
•Untuk membuatnya kita cukup mengetikkan stl lalu akan ada
pilihan untuk membuatnya.
 Statefull Widget adalah widget yang digunakan untuk menampilkan data-
data yang dinamis atau data yang kita telah tampilkan sewaktu-waktu
Statefull dapat mengalami perubahan.
Sedangkan untuk statefull kita cukup ketikkan stf lalu akan ada pilihan
untuk membuatnya.
Layout

Untuk mengatur tata letak atau posisi widget, maka kita akan mengenal dua buah widget
yaitu Row dan Column
Row akan menampilkan widget-widget secara horizontal atau sebaris dari kiri ke kanan,
widget Row menggunakan property children artinya widget ini bisa diisi oleh banyak
widget.
Latihan Membuat Layout

Column berlaku sebaliknya widget akan mengarah secara

vertikal atau dari atas kebawah, widget ini juga menggunakan
property children artinya widget ini bisa diisi oleh banyak
widget.
Latihan Membuat Layout
Center
Center berfungsi agar posisi widget yang kita buat berada ditengah.

Hasil
Text
Text berfungsi untuk menampilkan sebuah teks biasa, atau bisa kita berikan style dengan menambahkan
property style.
Widget ini untuk
menggunakan icon yang
telah disediakan, berikut
adalah contohnya.

Icon
Container
Container merupakan widget yang fungsinya untuk membungkus widget lain sehingga dapat diberikan nilai
seperti margin, padding, warna background, atau dekorasi.
SizedBox
SizedBox yaitu untuk membuat box, widget ini biasanya digunakan untuk menambahkan jarak baik secara
vertikal atau horizontal tergantung property yang kita atur.
Button
Terdapat 3 widget Button yang umumnya dipakai yaitu RaisedButton, MaterialButton, dan FlatButton
Pada raised button dan Material tombol akan sedikit menonjol.
Pada flat button tombolnya akan datar tanpa adanya efek-efek seperti bayangan dan lain-lain.
TextFormFiel
d

TextFormField
merupakan
widget yang
berguna untuk
membuat form
untuk diisi user.
Inkwell
Inkwell berguna untuk menambahkan action pada widget seperti action onTap misalnya :
ListView digunakan untuk
menampilkan daftar item
dalam jumlah yang banyak.

Simple
ListView
NavigatorPush

Untuk membuka halaman

baru, kita bisa menggunakan
Navigator.push.
NavigatorPop
Sedangkan pop, kita menghilangkan halaman lapisan teratas atau yang sedang tampil, sehingga akan kembali
ke halaman sebelumnya. Kita edit PageTwo dan kita tambahkan tombol back.
 Ringkasan
Widget di Flutter adalah elemen dasar yang digunakan untuk membangun antarmuka pengguna (UI) pada aplikasi Flutter. Setiap elemen
pada tampilan aplikasi, seperti teks, tombol, atau gambar, adalah contoh dari sebuah widget. Widget adalah komponen yang dapat
dikombinasikan dan disusun untuk membentuk tampilan dan fungsi aplikasi secara keseluruhan

Dalam Flutter, widget adalah kelas yang di-extend dari kelas dasarWidget. Ada dua jenis utamawidget yang digunakan dalam Flutter :

• Stateless Widget: Merupakan widget yang tidak memiliki state atau kondisi internal yangberubah. Stateless widget dibangun hanya berdasarkan konfigurasi yang
diberikan oleh parentwidget. Contohnya adalahText danIcon.
• StatefulWidgetStateful Widget: Merupakan widget yang memiliki state atau kondisi internal yang dapat berubahsepanjang waktu. Stateful widget mempertahankan
informasi tentang kondisi mereka saat ini dandapat memicu perubahan tampilan ketika kondisi tersebut berubah. Contohnya adalahCheckboxatauSlider.

Jenis-jenis Widget di Flutter:

• Text Widget adalah salah satu jenis widget yang digunakan untuk menampilkan teks didalam antarmuka pengguna aplikasi. Widget ini memungkinkan para
pengembang untukmenampilkan teks dalam berbagai format, ukuran, dan gaya, seperti teks biasa, teks berformat,dan teks dengan gaya khusus.
• Container Widget adalah widget yang digunakan untuk menampilkan dan mengelolaruang di dalam antarmuka pengguna aplikasi. Widget ini berfungsi sebagai
wadah kosong atau kotak yang dapat diisi dengan widget lain atau ditambahkan properti untuk mengubah tampilan dan fungsi kotak tersebut. Untuk membuat
Container Widget, kita perlu menyediakan anak widget yang akan ditampilkan didalamnya. Selain itu, kita juga dapat mengatur properti seperti padding, margin, dan
decoration untuk mengatur ukuran, jarak, dan gaya dari kotak tersebut.
• Column Widget di Flutter adalah widget yang digunakan untuk menampilkan widget lain dalamkolom vertikal. Widget ini memungkinkan para pengembang untuk
menempatkan beberapawidget dalam kolom tunggal yang disusun secara vertical. Untuk membuatColumn Widget, kita perlu menyediakan widget anak yang akan
ditampilkan didalamnya. Kita juga dapat mengatur properti sepertimainAxisAlignment dancrossAxisAlignmentuntuk mengatur cara tata letak dari widget anak dalam
kolom.
Terima
kasih
Referensi:
Modul Mobile Programming
https://flutter.dev/multi-platform/mobile
https://medium.com/flutter-developer-indonesia
Buku: A. Sasongko, M.S. Maulana & W. Nugraha. “Web
Programming; Membangun Aplikasi Mobile Kolaborasi Antara
Flutter dan Codeigniter”.
https://udemy.com/sourse/happy-flutter-membuat-aplikasi-android
-dan-ios-jadi-gampang