PEMROGRAMAN MOBILE

NAIYA SALSABILA
222406042
KOM B’22

PROGRAM STUDI D-3 TEKNIK INFORMATIKA

FAKULTAS VOKASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2023
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Allah SWT, dengan limpah karunia-
Nya penulis dapat menyelesaikan penyusunan makalah ini dengan judul Pemrograman
Mobile.
Terima kasih penulis sampaikan kepada setiap pihak yang sudah mendukung
selama belangsungnya pembuatan makalah ini. Terkhusus lagi penulis sampaikan
terima kasih kepada Bapak Drs. Syahriol Sitorus S.Si., M.IT. selaku dosen pengajar
dan asisten laboratorium Nathania Zefanya Nainggolan yang telah membimbing.
Penulis sekaligus juga berharap semoga makalah ini bisa bermanfaat bagi setiap
pembaca.
Disertai keseluruhan rasa rendah hati, kritik dan saran yang membangun amat
penulis nantikan, agar nantinya penulis dapat meningkatkan dan merevisi Kembali
pembuatan makalah di tugas lainnya dan diwaktu berikutnya.

Medan, Desember 2023

Naiya Salsabila

i
 DAFTAR ISI

Halaman
KATA PENGANTAR i
DAFTAR ISI ii

BAB 1 PENDAHULUAN
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Tujuan 2

BAB 2 FLUTTER
2.1 Pengenalan Flutter 3
2.2 Cara Kerja Flutter 3
2.3 Bahasa Pemrograman Dart 4
2.4 Kelebihan dan Kekurangan Flutter 6

BAB 3 VARIABEL, TIPE DATA, DAN OPERATOR PADA FLUTTER

3.1 Variabel Pada Flutter 7
3.1.1 Variabel Lokal dan Global 8
3.1.2 Menggunakan Metode Stdout.Write() 8
3.2 Tipe Data 9
3.2.1 Tipe Bilangan 9
3.2.2 Tipe Teks 10
3.2.3 Tipe Logika dan Tipe List 10
3.2.4 Tipe Map 11
3.3 Operator 12
3.3.1 Operator Penugasan 12
3.3.2 Operator Aritmatika 12
3.3..3 Operator Increment dan Operator Decrement 13
3.3.4 Operator Relasional 13
3.3.5 Operator Logika 14

BAB 4 STRUKTUS KONTROL FLUTTER

4.1 Struktur Pemilihan 15
4.2 IF 15
4.2.1 Perintah IF Satu Kasus 15
4.2.2 Perintah IF Dua Kasus 16
4.2.3 Perintah IF Tiga Kasus 16
4.3 Perintah Switch 17
4.4 Perintah While 18
4.5 Perintah Do-While 19
4.6 Perintah For 19
4.7 Penelusuran Elemen Dalam Koleksi 20

ii
 4.8 Pernyataan Loncat 21
4.9 Fungsi Exit() 22

BAB 5 HELLO FLUTTER

5.1 Hello Flutter 23
5.2 Langkah – Langkah Membuat Aplikasi Hello Flutter 23

BAB 6 UI 1 FLUTTER
6.1 Widget 25
6.1.1 Konsep-konsep Penting tentang Widget 26
6.1.2 Penggunaan Widget Dasar 26
6.2 Layout 27
6.2.1 Jenis – Jenis Layout 28
6.3 Styling UI 29
6.3.1 Konsep Dasar Styling UI dalam Flutter 29

BAB 7 UI 2 FLUTTER
7.1 UI 2 Pada Flutter 31
7.2 Konsep dan Fitur dalam UI 2 Flutter 31
7.2.1 Animasi yang Lebih Kompleks 31
7.2.2 Pola Desain (Design Patterns) dan Manajemen State 33
7.2.3 Komponen UI yang Kompleks 34
7.2.4 Responsif dan Adaptabilitas 35
7.2.5 Pengujian UI yang Lebih Mendalam 36

BAB 8 PROJECT
8.1 Pengenalan Project 38
8.2 Intro Screen 38
8.3 Dashboard Screen 40
8.4 Detail Screen 42

BAB 9 PENUTUP
9.1 Kesimpulan 45
9.2 Saran 45

DAFTAR PUSTAKA

iii
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi semakin meningkat dari tahun ke tahun. Hal ini tentu
saja menjadi sebuah tantangan bagi para pengembang aplikasi untuk terus mengikuti
arus perkembangan teknologi. Banyak sekali jenis tool yang dapat digunakan oleh para
pengembang, baik tool untuk membangun aplikasi berbasis website maupun untuk
membangun aplikasi berbasis mobile. Untuk mobile, tool yang saat ini banyak
digunakan adalah platform IOS dan Android. Namun demikian yang menjadi masalah
bagi pengembang adalah untuk mengembangkan berbagai jenis aplikasi berbasis
mobile mereka harus menggunakan tool berbeda contoh dalam pengembangan aplikasi
dengan platform android pengembang harus menggunakan Android Studio sebagai
IDE dengan bahasa pemrograman Java, sementara untuk platform IOS pengembang
harus menggunakan Xcode sebagai IDE dengan bahasa pemrograman Swift. Hal ini
tentu saja dapat memakan waktu lama dalam proses pengembangan aplikasi berbasis
mobile.
Ada teknologi yang dapat mengatasi masalah tersebut yaitu sebuah framework
berjenis cross-platform. Framework cross-paltform merupakan framework yang
multiguna yang dapat digunakan untuk mengembangkan aplikasi dengan lebih dari
satu platform baik itu Android maupun IOS. Selain itu framework cross-paltform
bersifat native maksudnya adalah pengembang cukup menguasai satu bahasa saja
(misalnya dart atau javascript) dan saat dilakukan kompilasi framework ini akan
mengkonversi bahasa tersebut ke dalam dua bahasa berbeda yaitu java untuk Android
dan swift untuk IOS. Contoh framework cross-paltform yang saat ini banyak
digunakan adalah flutter.
Flutter merupakan framework cross-platform untuk pengembangan aplikasi
mobile menggunakan bahasa pemrograman Dart dan dikembangkan oleh Google.
Namun demikian keberadaan framework ini telah menjadi masalah tersendiri, mana
yang harus dipilih oleh para pengembang. Perlu ada uji coba terkait framework Fluter
agar dapat membantu para pengembang dalam menentukan pilihannya.
 2

1.2 Rumusan Masalah

1. Bagaimana cara membuat aplikasi mobile ?
2. Apa itu flutter ?
3. Bagaimana kegunaan flutter dan apa manfaatnya ?
4. Apaitu Bahasa Dart ?
5. Bagaimana cara menggunakan Bahasa Dart ?

1.3 Tujuan
1. Untuk menambah pengetahuan seluruh pembaca termasuk saya sendiri mengenai
pemrograman mobile
2. Untuk mengetahui bagaimana cara membuat aplikasi mobile terutama dengan
menggunakan framework Flutter.
3. Untuk mengetahui cara menggunakan Bahasa pemrograman Dart.
4. Untuk memenuhi tugas akhir praktikum Pemrograman Mobile sebagai syarat
untuk dapat mengikuti UAS praktikum Pemrograman Mobile.
 BAB 2
FLUTTER

2.1 Pengenalan Flutter

Flutter adalah framework yang digunakan para programmer untuk membuat
aplikasi multiplatform hanya dengan satu basis coding (codebase). Artinya, aplikasi
yang dihasilkan dapat dipakai di berbagai platform, baik mobile Android, iOS, web,
desktop, bahkan yang terbaru bisa juga dikembangkan dalam perangkat tanam atau
embedded. Flutter juga merupakan framework yang gratis dan open source serta
menggunakan Bahasa pemrograman Dart.
Berdasarkan sejarah framework ini merupakan buatan Google serta mulai
dikembangkan dengan nama Sky. Kala itu, Flutter pertama kali diperkenalkan pada
acara Dart Developer Summit tahun 2015. Pada tanggal 4 Desember 2018, Google
merilis Flutter 1.0 di acara Flutter Live Event. Hal ini juga menandai rilisnya versi
stabil pertama dari Flutter. Sejak saat itu, platform ini menjadi populer dan banyak
diperbincangkan di kalangan para programmer. Flutter memiliki dua komponen
penting, yaitu:
1. Software Development Kit (SDK). Merupakan sekumpulan tools yang berfungsi
untuk membuat aplikasi supaya bisa dijalankan di berbagai platform.
2. Framework User Interface. merupakan komponen UI, seperti teks, tombol,
navigasi, dan lainnya, yang dapat kita kustomisasi sesuai kebutuhan.

Gambar 2.1 Flutter

2.2 Cara Kerja Flutter

Ide utama di balik Flutter adalah penggunaan widget. Dengan menggabungkan
widget yang berbeda, pengembang dapat membuat semua bagian dari antarmuka
pengguna. Masing-masing widget ini mendefinisikan elemen struktural (tombol,
 4

menu, dll.), elemen gaya (font, skema warna, dll.), aspek tata letak (padding, dll.), dan
banyak lagi. Flutter tidak menggunakan widget OEM, melainkan memberi
pengembang widget siap pakai mereka sendiri (Desain Material atau gaya Cupertino)
untuk aplikasi Android and iOS. Tentu saja, pengembang juga dapat membuat widget
sendiri. Flutter juga memberi pengembang tampilan reaktif. Flutter menggunakan Dart
untuk menghindari masalah kinerja yang disebabkan oleh penggunaan bahasa
pemrograman yang dikompilasi sebagai jembatan JavaScript. Flutter mengkompilasi
Dart AOT (Ahead Of Time) ke dalam kode native yang kompatibel dengan platform.
Dengan demikian, Flutter mampu berkomunikasi dengan mudah dengan
banyak platform tanpa memerlukan jembatan JavaScript yang memerlukan konteks
peralihan antara cakupan JavaScript dan cakupan asli. Seperti yang dapat Anda
bayangkan, kompilasi ke kode asli juga meningkatkan waktu peluncuran aplikasi
Anda. Saat ini, Flutter adalah satu-satunya SDK seluler yang menyediakan tampilan
aplikasi yang responsif tanpa memerlukan jembatan JavaScript. Itu sebabnya begitu
banyak pengembang seluler telah mencobanya dalam proyek. Salah satu fitur menarik
Flutter adalah bahasa pemrograman yang digunakan Flutter, Dart. Seperti sistem lain
yang menggunakan tampilan aplikasi reaktif, Flutter memperbarui pohon tampilan
aplikasi dengan setiap bingkai baru. Untuk mencapai ini, buat beberapa objek
yang tidak boleh bertahan lebih lama dari satu bingkai.
Dart menggunakan pengumpulan sampah generasi, yang telah terbukti sangat
efisien dalam sistem jenis ini. Selain itu, Dart memiliki kompiler "TreeShaker" yang
hanya berisi kode yang dibutuhkan oleh aplikasi Anda sendiri. Jika Anda hanya
membutuhkan satu atau dua widget, Anda bebas menggunakan perpustakaan
widget yang besar. Dart hadir dengan repositori paket perangkat lunak untuk
memperluas fungsionalitas aplikasi Anda. Misalnya, kami menyediakan beberapa
paket yang memberi Anda akses mudah ke Firebase, sehingga pengembang dapat
membangun aplikasi tanpa server.

2.3 Bahasa Pemrograman Dart

Dart adalah merupakan bahasa pemrograman yang dikembangkan oleh google
untuk kebutuhan dalam membuat aplikasi android atau mobile, front-end, web, IoT,
back-end (CLI), dan Game. Dart menerapkan konsep pemrograman berorientasi objek
 5

(OOP) dimana struktur kode berada dalam class yang didalamnya berisi method
maupun variabel. Dart sendiri menggunakan C-Style syntax sehingga mekanisme dart
mirip dengan bahasa pemrograman C, java, javascript, dan Swift.
Dart pertama kali diresmikan pada konferensi GOTO di Aarhus, Denmark pada
10-12 Oktober 2011 yang dalam pengerjaan proyeknya dipimpin oleh Lars Bak dan
Kasper Lund. Sebelum rilis versi stabilnya, pada tahun 2013, dart merilis pertama kali
pada versi 1.0 ke publik dimana google memberikan dukungan secara penuh untuk
flutter yang merupakan framework yang menerapkan bahasa pemrograman dart. Dart
dan flutter sendiri bermula ketika muncul ide ngawang dari pihak google yang
menyatakan bahwa seharusnya terdapat cara yang lebih efektif dalam membuat
apalikasi mobile yang mendukung segi Interface UI/UX.

Gambar 2.2 Dart

Tipe bahasa pemrograman dart berupa Statically Typed dimana tipe dari
variabel diketahui ketika proses compile, ketika membangun aplikasi mobile, dart
dicompile kedalam bahasa native agar dapat berjalan di mobile, lalu di transpiler ke
javascript agar dapat berjalan di browser. Transpiler bisa diartikan sebagai source-to-
source compiler , yaitu sebuah compiler yang mengambil source code suatu program
yang di tulis menggunakan suatu bahasa pemrograman sebagai input dan
menghasilkan source code yang equivalent dalam bahasa pemrograman lainnya Dart
diterapkan pada framework flutter yang merupakan framework untuk membuat
aplikasi mobile yang saat ini ramai diperbincangkan. Flutter adalah sebuah framework
yang dirancang khusus untuk membangun antarmuka (UI) aplikasi mobile yang lebih
ekspresif dan menarik.
 6

2.4 Kelebihan dan Kekurangan Flutter

Sama seperti framework lainnya, flutter juga memiliki beberapa kelebihan
yang membuat banyak pengguna memilih untuk menggunakannya, namun tak bisa
dipungkiri flutter juga memiliki kekurangan.
1. Kelebihan Flutter
a. Alasan pertama para mobile developer menggunakan flutter adalah adanya
berbagai macam fitur yang dapat membantu sebuah proses untuk
mengembangkan aplikasi menjadi lebih mudah dan cepat.
b. Selain membantu developer untuk membuat aplikasi, flutter juga menawarkan
sebuah tampilan user interface aplikasi yang menarik. Kamu dapat memakai
koleksi untuk tampilan widget flutter adalah sebagai berikut: style tema,
tampilan aplikasi, animasi, navigasi, font, dan tampilan scrolling. Dengan
menggunakan widget tersebut kamu dapat mengkustomisasi sesuai
kebutuhan, maka dari itu kamu bisa membuat tampilan aplikasi dengan unik
secara mudah.
c. Meskipun aplikasi flutter adalah bersifat multi platform, tetapi aplikasi yang
dihasilkan tak mau kalah dengan aplikasi dari native.
Karena flutter menggunakan kombinasi kode aplikasi native serta mesin
render canggih yang hasilnya sebuah aplikasi dapat ditampilkan pada berbagai
macam platform.
d. Seperti yang para mobile developer tahu bahwa flutter adalah framework.
e. Pembuatan aplikasi multiplatform. Sehingga proses pengembangan bisa lebih
efisien dan tidak perlu membuat aplikasi untuk platform yang berbeda.
2. Kekurangan Flutter
a. Flutter adalah sebuah teknologi yang masih baru, sehingga komunitasnya pun
baru berkembang. Artinya resource code atau library yang dipunyai masih
sedikit.
b. Meskipun performa aplikasi yang dikembangkan sangatlah stabil, tetapi
aplikasi yang dihasilkan cenderung berat serta memiliki ukuran file besar.
c. Dengan menggunakan flutter, kamu juga perlu mempelajari bahasa
pemrograman yaitu Dart. Bahasa pemrograman Dart ini belum banyak dikenal
meski sudah ada mobile developer yang menggunakannya.
 BAB 3
VARIABLE, TIPE DATA, DAN OPERATOR PADA FLUTTER

3.1 Variabel Pada Flutter

Variabel adalah setiap karakteristik, jumlah, atau kuantitas yang dapat diukur
atau dihitung. Sedangkan didalam Bahasa Pemrogaman, pengertian dari variabel
sendiri adalah wadah untuk menyimpan suatu nilai (value) yang nantinya bisa
dipanggil. Secara teknis maksudnya sama. Susunan sederhana dalam membuat
variable pada program dart adalah TypeData nameVariabel = value;
Sebuah variabel harus dideklarasikan sebelum digunakan. Dart menggunakan
keyword var untuk mendeklarasikannya. Sintaks untuk mendeklarasikan variabel
ditulis seperti ini, var pesan = ‘Selamat Belajar!’;. Semua variabel dalam bahasa Dart
menyimpan referensi ke nilai daripada berisi nilai. Variabel bernama name berisi
referensi ke objek String dengan nilai “Smith”. Dart mendukung pemeriksaan tipe
dengan mengawali nama variabel dengan tipe data. Pemeriksaan jenis memastikan
bahwa variabel hanya menyimpan data khusus untuk suatu jenis data. Semua variabel
yang tidak diinisialisasi memiliki nilai awal null. Hal ini dikarenakan Dart
menganggap semua nilai sebagai objek.
1. Keyword Dinamic
Variabel yang dideklarasikan tanpa tipe statis secara implisit dideklarasikan
sebagai dinamis. Variabel juga dapat dideklarasikan menggunakan kata kunci
dinamis sebagai pengganti kata kunci var. Hal tersebut digambarkan seperti ini
void main() {
dynamic pesan = "Selamat Belajar!";
print(pesan);
}
Output : Selamat Belajar!
2. Final dan Const
Keyword final dan const digunakan untuk mendeklarasikan konstanta. Dart dapat
mencegah modifikasi nilai variabel yang dideklarasikan menggunakan kata kunci
final atau const. Kata kunci ini dapat digunakan bersama dengan jenis data variabel
atau sebagai pengganti kata kunci var. Keyword const digunakan untuk mewakili
 8

konstanta waktu kompilasi. Variabel Dart yang dideklarasikan menggunakan kata

kunci const secara implisit bersifat final.
Sintaks: keyword final
final variable_name atau dapat juga ditulis final data_type
variable_name
Sintaks: Keyword Const
const variable_name atau dapat juga ditulis const data_type
variable_name

3.1.1 Variabel Lokal dan Global

Local variabel adalah variable yang hanya bisa diakses dari dalam fungsinya
saja dan tidak bisa diakses dari luar fungsinya, perhatikan contoh dibawah ini
void hitungLuasPersegi(){
int sisi = 10;
int luas = sisi*sisi;
print("luas = $luas");
}
Variabel sisi pada fungsi hitung Luas Persegi() adalah local Variable dimana
variable tersebut tidak dapat diakses dari dalam fungsi hitung Luas Persegi
Panjang begitu juga semua atribut yang ada di dalam masing masing fungsi tidak dapat
diakses oleh fungsi yang lain. Sedangkan Global Variable adalah variable yang bisa
diakses dari mana saja dan nilainya dapat diubah dari fungsi mana saja,

3.1.2 Menggunakan Metode Stdout.Write()

Kita sudah mengenal fungsi print() yang digunakan untuk menampilkan output
ke dalam console. Selain menggunakan fungsi print(), kita juga dapat menggunakan
fungsi stdout.write(). Fungsi ini berada di dalam library dart:io. Jadi untuk
menggunakan fungsi stdout.write(), kita harus mengimportnya terlebih dahulu.
Caranya: Pada bagian paling atas program, kita tulis import seperti ini, import 'dart:io';
Maka semua fungsi yang ada di dalam library dart:io akan dapat digunakan di dalam
program. Contoh
import 'dart:io';
void main(){
stdout.write("Nama Anda : ");
var nama = stdin.readLineSync();
 9

stdout.write("umur : ");
var umur = stdin.readLineSync();
var usia =int.parse('$umur');
print('Nama : $nama');
print('umur : $usia');
print(umur.runtimeType); //string
print(usia.runtimeType); //int
}
Fungsi write() digunakan untuk menampilkan teks ke console “apa adanya”.
Artinya dia tidak akan membuat baris baru. Berbeda dengan print() yang akan selau
membuat baris baru di setiap mencetak teks. Lalu fungsi readLineSync() adalah fungsi
untuk membaca input dari keyboard. Fungsi ini akan mengembalikan nilai berupa
String. Sedangkan fungsi int.parse digunakan untuk merubah dari tipe data string
menjadi integer.

3.2 Tipe Data

Tipe data adalah kata kunci yang menyatakan jenis dari nilai yang tersimpan
dalam variabel maupun konstanta. Dalam Dart, tipe data dikelompokkan menjadi tipe
bilangan, teks, logika, list, map, dan simbol. Tipe simbol sangat jarang digunakan,
sehingga tidak akan dibahas pada materi ini, kalau penasaran silahkan explore sendiri.

3.2.1 Tipe Bilangan

Tipe bilangan dinyatakan dengan kelas int dan double. Kedua kelas ini
merupakan turunan dari kelas num.
1. Tipe int
Tipe int digunakan untuk merepresentasikan bilangan bulat, seperti -1,0,13,234,
dan lain”. Berbeda dengan bahasa pemrograman lain pada umumnya, Dart tidak
mendukung nilai bilangan bulat yang ditulis dalam notasi biner (basis 2) dan oktal
(basis 8). Dalam Dart, bilangan bulat hanya dapat ditulis dalam notasi desimal
(basis 10) atau heksadesimal (basis 16). Untuk bilangan heksadesimal, tambahkan
0x atau 0X didepan bilangan bersangkutan.
3. Tipe double digunakan untuk merepresentasikan bilangan riil (bilangan yang
mengandung angka di belakang koma), seperti -1.1, 0.0, 13.45, dan lain-lain. Dart
 10

juga mengizinkan kita untuk menulis nilai bilangan riil dalam notasi sains, yaitu
dengan menambahkan huruf E atau e.
2. Tipe Num
Tipe num merupakan tipe induk dari tipe int dan double. Variabel yang
dideklarasikan menggunakan tipe num dapat diisi nilai dari bilangan bulat maupun
bilangan riil. Pada saat variabel dideklarasikan menggunakan tipe num, tipe data
dari variable tersebut akan bergantung pada nilai yang diisikan ke dalamnya. Jika
nilai yang diisikan bertipe int maka variabel tersebut bertipe int. Jika nilainya
bertipe double maka variabel akan bertipe double.

3.2.2 Tipe Teks

Dalam Dart, nilai yang berupa teks atau kumpulan karakter (disebut String)
dinyatakan sebagai objek dari kelas String. Teks dapat dibuat menggunakan tiga cara,
yaitu menggunakan tanda petik tunggal, menggunakan tanda petik ganda.
menggunakan tanda petik tunggal atau ganda yang ditulis tiga kali (digunakan untuk
membuat teks dengan jumlah baris lebih dari satu). Untuk mengetahui karakter di
dalam teks yang terletak pada indeks tertentu, gunakan tanda [] dengan menyebutkan
indeks yang ingin diakses. Dalam Dart, indeks teks dimulai dari 0. Objek dari kelas
String bersifat immutable (tidak dapat diubah nilainya). Meskipun demikian, kita tetap
dapat melakukan operasi terhadap string. Setiap operasi yang dilakukan terhadap
string akan menghasilkan objek baru dari kelas String.

3.2.3 Tipe Logika dan Tipe List

Tipe logika dinyatakan dengan tipe bool. variabel yang dideklarasikan
menggunakan tipe bool hanya dapat diisi dengan nilai true(benar) atau false (salah).
List adalah objek koleksi yang menyimpan daftar objek. Dalam Dart, list
dinyatakan dengan tipe List. Untuk membuat list, kita perlu menggunakan tanda [],
seperti ini, List<tipeElemen>namaList=[nilai1,nilai2,....]
Objek” yang berada di dalam list sering disebut elemen list. Pada contoh di
atas, kita membuat list dengan tiga elemen bertipe int. Selanjutnya, elemen di dalam
list dapat ditambah dan dihapus sesuai kebutuhan program. Untuk mengakses elemen-
elemen tersebut, gunakan indeks bilangan bulat yang dimulai dari nol (0,1,2,...)
 11

1. Penambahan elemen ke dalam objek list dilakukan dengan cara memanggil

metode add(), seperti list.add(28);
2. Untuk mengubah nilai dari elemen list, sertakan indeks dari elemen yang akan
diubah dan nilai baru yang digunakan.
3. Elemen” yang terdapat di dalam list dapat dihapus menggunakan beberapa cara
yaitu menggunakan metode remove(), menggunakan metode removeAt(),
menggunakan metode removeLast(), menggunakan metode removeRange(),
menggunakan metode removeWhere()

3.2.4 Tipe Map

Map adalah objek koleksi yang setiap elemennya berupa pasangan kunci (key)
dan nilai (value). Terdapat asosiasi antara kunci dan nilai pada setiap elemen yang
terdapat di dalam map. Dalam satu objek map, kunci harus bersifat unik, tapi nilai
tidak. Ini berarti bahwa satu nilai yang sama bisa saja muncul pada beberapa elemen
map. Beberapa bahasa pemrograman lain menamai map dengan istilah yang berbeda.
Sebagai contoh, Python menyebut map dengan istilah dictionary, Ruby menyebutnya
sebagai hash, dan PHP menyebut map sebagai array asosiatif. Dalam Dart, map
dinyatakan dengan tipe Map. Objek dari kelas Map dibuat menggunakan tanda {},
dengan bentuk umum berikut
Map<tipeKunci, tipeNilai>namaMap = {kunci1 : nilai1, kunci2 :
nilai2, ....}

1. Untuk membuat map kosong(tanpa elemen) , gunakan kode Map<String, int>

map; atau Map<String, int> map = Map<String, int>(); sedangkan untuk
menambahkan elemen Map dilakukan menggunakan bentuk umum
namaMap[kunci] = nilai;
2. Untuk mengubah elemen map, sertakan nama kunci dan nilai baru yang akan
digunakan, sama seperti pada saat menambah elemen map.
namaMap[kunci] = nilaiBaru;
Perbedaannya, nama kunci harus sudah ada di dalam map. Jika belum ada maka
perintah tersebut hanya akan menambah elemen baru, bukan mengubah. Perlu
diperhatikan bahwa nama kunci di dalam map bersifat case-sensitive (huruf
keci dan besar dianggap berbeda).
 12

3. Elemen map dapat dihapus menggunakan dua cara, yaitu dengan menggunakan
metode remove() atau removeWhere(). Metode remove() akan menghapus elemen
map berdasarkan nama kunci yang disertakan sebagai parameternya. Metode
removeWhere() digunakan untuk menghapus elemen map berdasarkan kriteria
tertentu. Kriteria perlu ditulis dalam bentuk fungsi yang selanjutnya dikirim
sebagai parameter dari metode removeWhere(). Berbeda dengan list, dalam objek
map kriteria dapat ditentukan berdasarkan kunci maupun nilainya.

3.3 Operator
Operator merupakan simbool khusus yang disediakan oleh Dart untuk
melakukan operasi-operasi tertentu, seperti perhitungan bilangan, penyambungan teks,
perbandingan dua buah nilai, dan sebagainya.

3.3.1 Operator Penugasan

Operator penegasan (assignment) adalah operator yang digunakan untuk
mengisi nilai ke dalam suatu variabel. Dart menggunakan tanda sama dengan (=) untuk
menyatakan operator penugasan. Sama seperti C/C++, Dart juga menyediakan
operator penugasan yang ditulis dalam bentuk singkat.
Perhatikan contoh berikut :
a += 1
Perintah diatas sama artinya dengan a = a + 1. Bentuk singkat ini juga berlaku untuk
Operator - operator lain, misalnya perkalian, pembagian, dan sebagainya.
a *= 2; -> a = a * 2;
a ~/= 3; -> a = a ~/ 2; (a bertipe int)
a /= 3; -> a = a / 2; (a bertipe double)

3.3.2 Operator Aritmatika

Operator aritmetika adalah operator yang digunakan untuk melakukan operasi
perhitungan bilangan. Tabel dibawah ini menunjukkan daftar operator aritmetika di
dalam Dart.
 13

Tabel 3.1 Operator Aritmatika

3.3..3 Operator Increment dan Operator Decrement

Sama seperti C dan C++, Dart juga dilengkapi dengan operator increment (++).
Operator ini berfungsi untuk menaikkan nilai variabel dengan 1. Operator increment
itu sendiri dibedakan menjadi dua yaitu pre-increment dan post- increment. Pada pre-
increment, operator ++ ditulis sebelum nama variabel dan memiliki arti bahwa nilai
variabel akan dinaikkan terlebih dahulu sebelum di proses. Pada post-increment,
operator ++ dituliskan setelah nama variabel dan memiliki arti bahwa variabel akan di
proses terlebih dahulu sebelum nilainya dinaikkan. Perhatikan baris kode berikut ini
print ('++a: ${++a}');
pada baris diatas, nilai a akan dinaikkan terlebih dahulu sebelum ditampilkan.
Selanjutnya, perhatikan kembali kode berikut :
print ('b++: ${b++}');
kali ini variable b akan ditampilkan terlebih dahulu sebelum nilainya dinaikkan.
Sedangkan, Operator decrement(--) merupakan kebalikan dari increment, yang
berfungsi untuk mengurangi nilai variabel dengan 1.

3.3.4 Operator Relasional

Operator relasional adalah operator yang digunakan untuk membandingkan
dua buah nilai. Hasil yang akan diperoleh dari operasi perbandingan ini adalah nilai
logika (bertipe bool), yaitu true atau false.

Tabel 3.2 Operator Relasional

 14

3.3.5 Operator Logika

Operator logika adalah operator yang digunakan untuk melakukan operasi
terhadap nilai true dan false. Dart memiliki tiga operator logika, seperti berikut

Tabel 3.3 Operator Logika

Ada beberapa hal yang harus diketahui mengenai operator logika yaitu
1. Operasi AND hanya akan menghasilkan nilai true jika kedua operand bernilai true.
Selain kondisi tersebut, maka nilai yang akan dihasilkan adalah false.
2. Operasi OR hanya akan menghasilkan nilai false jika kedua operand bernilai false.
Selain kondisi tersebut, nilai yang akan dihasilkan adalah true.
3. Operasi negasi akan mengembalikan nilai lawan (kebalikan) dari nilai operand.
 BAB 4
STRUKTUR KONTROL FLUTTER

4.1 Struktur Pemilihan

Struktur pemilihan merupakan blok program yang berfungsi untuk memilih
perintah yang akan dilakukan oleh program berdasarkan kondisi tertentu yang
didefinisikan di dalamnya. Dart menyediakan dua perintah untuk membuat struktur
pemilihan, yaitu if dan switch. Struktur pemilihan ini memungkinkan pengaturan alur
program berdasarkan keadaan tertentu, memungkinkan kode untuk merespons kondisi
yang berbeda dengan cara yang sesuai.

4.2 IF
Digunakan untuk mengevaluasi suatu kondisi dan menjalankan blok kode jika
kondisi terpenuhi. Pembuatan struktur pemilihan menggunakan perintah if dapat
dibedakan menjadi 3 yaitu perintah if satu kasus, perintah if dua kasus, dan perintah if
tiga kasus atau lebih.

4.2.1 Perintah IF Satu Kasus

Perintah if satu kasus digunakan untuk membuat struktur pemilihan yang
hanya melibatkan satu kondisi. Bentuk umum penggunaannya adalah sebagai berikut
if (kondisi) aksi;
Dalam Dart, kondisi atau ekspresi logika yang akan diperiksa dalam blok
pemilihan harus diapit menggunakan tanda kurung. Pada bentuk umum diatas, aksi
hanya akan dilakukan ketika kondisi bernilai benar (true). Jika kondisi bernilai salah
(false), aksi diabaikan atau tidak dilakukan. Jika aksi yang akan dilakukan terdiri dari
beberapa perintah, maka kita perlu mengelompokkan perintah-perintah tersebut ke
dalam satu blok program menggunakan tanda {}. Contoh IF satu kasus
var nilai = 10;
if (nilai > 5) {
print("Nilai lebih besar dari 5");
// Jika nilai lebih besar dari 5, pesan ini akan dicetak.
}
 16

Dalam contoh ini, jika nilai variabel nilai lebih besar dari 5, pesan "Nilai lebih
besar dari 5" akan dicetak karena blok kode di dalam pernyataan if hanya akan
dieksekusi jika kondisinya benar (nilai variabel `nilai` lebih besar dari 5). Jika tidak,
maka blok kode tersebut akan dilewati tanpa dieksekusi.

4.2.2 Perintah IF Dua Kasus

Pernyataan if dengan dua kasus, menggunakan blok if dan else, memungkinkan
pengecekan kondisi tertentu. Di sini, jika kondisi dalam blok if tidak terpenuhi, maka
blok else akan dieksekusi. Contohnya
var nilai = 10;
if (nilai > 5) {
print("Nilai lebih besar dari 5");
// Dieksekusi jika nilai > 5
} else {
print("Nilai kurang atau sama dengan 5");
// Dieksekusi jika nilai <= 5
}
Dalam contoh ini, jika nilai lebih besar dari 5, pesan "Nilai lebih besar dari 5"
akan dicetak karena blok kode di dalam if akan dieksekusi. Jika tidak, maka pesan
"Nilai kurang atau sama dengan 5" akan dicetak karena blok kode di dalam else akan
dieksekusi. Hal ini memungkinkan aplikasi untuk menentukan tindakan yang sesuai
berdasarkan nilai yang diberikan.

4.2.3 Perintah IF Tiga Kasus

Pernyataan if dengan tiga kasus atau lebih menggunakan struktur if, else if, dan
else untuk mengevaluasi beberapa kondisi secara berurutan. Di sini, jika kondisi dalam
blok if tidak terpenuhi, maka akan mengecek kondisi pada blok else if. Jika tidak ada
kondisi yang terpenuhi, maka blok `else` akan dieksekusi. Contoh penggunaannya
dalam Dart:
var nilai = 10;
if (nilai > 10) {
print("Nilai lebih besar dari 10");
} else if (nilai == 10) {
print("Nilai sama dengan 10");
} else if (nilai > 5) {
 17

print("Nilai lebih besar dari 5");

} else {
print("Nilai kurang dari atau sama dengan 5");
}
Dalam contoh ini, program akan mengevaluasi kondisi secara berurutan. Jika
nilai lebih besar dari 10, pesan "Nilai lebih besar dari 10" akan dicetak. Jika tidak,
tetapi nilai sama dengan 10, pesan "Nilai sama dengan 10" akan dicetak. Jika kondisi
sebelumnya tidak terpenuhi, tetapi `nilai` lebih besar dari 5, pesan "Nilai lebih besar
dari 5" akan dicetak. Terakhir, jika tidak ada kondisi yang terpenuhi, pesan "Nilai
kurang dari atau sama dengan 5" akan dicetak. Ini memungkinkan pengambilan
keputusan yang berbeda tergantung pada kondisi yang benar.

4.3 Perintah Switch

Selain menggunakan if, struktur pemilihan juga dapat dibuat menggunakan
perintah switch. Bentuk umum penggunaan perintah ini adalah sebagai berikut
switch (namaVariabel) {
case nilai1: aksi1; break;
case nilai2: aksi2; break;
....
default: aksiAlternatif;
}
Pernyataan `switch` dalam Dart digunakan untuk memilih satu dari beberapa
blok kode yang akan dieksekusi berdasarkan nilai yang sama dari suatu ekspresi.
Contoh penggunaannya dalam Dart
var pilihan = 'B';
switch (pilihan) {
case 'A':
print('Pilihan A');
break;
case 'B':
print('Pilihan B');
break;
case 'C':
print('Pilihan C');
 18

Dalam contoh di atas, jika nilai dari variabel pilihan adalah A, maka blok kode
di bawah case A akan dieksekusi. Jika nilainya adalah B, maka blok kode di bawah
case B yang akan dieksekusi. Jika nilainya adalah C, maka blok kode di bawah case C
yang akan dieksekusi. Jika tidak ada kasus yang cocok dengan nilai pilihan, maka blok
kode di bawah default akan dieksekusi. Pernyataan break digunakan untuk
menghentikan eksekusi setelah suatu blok kode case dieksekusi. Jika tidak ada break,
eksekusi akan dilanjutkan ke kasus berikutnya setelah kasus yang cocok dieksekusi.
Pernyataan default adalah opsional dan akan dieksekusi jika tidak ada kasus yang
cocok dengan nilai yang dievaluasi. Ini memungkinkan penanganan nilai yang tidak
dikenali.

4.4 Perintah While

Pernyataan while dalam Dart digunakan untuk membuat sebuah loop atau
perulangan yang akan terus dieksekusi selama kondisi yang diberikan bernilai benar
(true). Jika kondisi menjadi salah (false), maka loop akan berhenti dan eksekusi kode
dilanjutkan setelah blok while. Contoh penggunaannya dalam Dart
var angka = 0;
while (angka < 5) {
print(angka);
angka++;
}
Dalam contoh di atas, angka awalnya adalah 0. Saat kondisi angka < 5
terpenuhi (true), blok kode di dalam while akan dieksekusi. Setiap iterasi akan
mencetak nilai angka dan kemudian angka akan bertambah 1. Loop akan terus
berlanjut sampai kondisi angka < 5 menjadi salah (false), yaitu ketika angka bernilai
5. Penting untuk memastikan bahwa ada pengaturan yang memungkinkan kondisi di
dalam while dapat berubah agar tidak menyebabkan loop menjadi tak berujung atau
infinite loop. Salah satunya adalah dengan memperbarui nilai variabel kontrol di dalam
loop sehingga pada suatu saat kondisi tersebut akan menjadi salah dan loop akan
berhenti.
 19

4.5 Perintah Do-While

Pernyataan do while dalam Dart mirip dengan while, namun perbedaannya
terletak pada urutan evaluasi kondisi. Dalam do while, blok kode dieksekusi terlebih
dahulu sebelum kondisi dicek. Jika kondisi bernilai benar (true), maka loop akan terus
berlanjut. Contoh penggunaannya dalam Dart
var angka = 0;
do {
print(angka);
angka++;
} while (angka < 5);
Dalam contoh di atas, blok kode di dalam do akan dieksekusi terlebih dahulu
sebelum kondisi di dalam while dicek. Angka akan dicetak dan kemudian angka akan
bertambah 1. Loop akan terus berlanjut selama kondisi angka < 5 terpenuhi (true).
Bedanya dengan while adalah bahwa dalam do while, setidaknya satu iterasi akan
dieksekusi bahkan jika kondisi awalnya salah, karena evaluasi kondisi terjadi setelah
eksekusi blok kode pertama kali. Penting untuk memastikan ada pengaturan yang
memungkinkan kondisi di dalam do while dapat berubah sehingga pada suatu saat
kondisi tersebut akan menjadi salah dan loop akan berhenti.

4.6 Perintah For

Pernyataan for dalam Dart digunakan untuk membuat sebuah loop atau
perulangan dengan kondisi awal, kondisi untuk melanjutkan loop, dan langkah
peningkatan nilai yang terus diulang. Contoh penggunaannya dalam Dart:
for (var i = 0; i < 5; i++) {
print(i); }
Dalam contoh di atas, var i = 0 adalah kondisi awal, yang menginisialisasi
variabel i dengan nilai 0 sebelum loop dimulai. i < 5 adalah kondisi yang menentukan
apakah loop harus dilanjutkan atau tidak. Jika kondisi tersebut terpenuhi (true), maka
blok kode di dalam for akan dieksekusi. Setelah eksekusi blok kode di dalam for, i++
akan menambahkan nilai variabel i sebanyak 1 pada setiap iterasi loop. Loop akan
terus berlanjut selama kondisi i < 5 terpenuhi. Ketika i mencapai nilai 5 dan kondisi
tidak lagi terpenuhi (false), loop akan berhenti dan eksekusi program dilanjutkan
setelah blok for. Penggunaan perintah for sangat berguna ketika kita tahu berapa kali
 20

kita ingin menjalankan suatu blok kode atau ketika kita ingin melakukan iterasi melalui
suatu rentang nilai.

4.7 Penelusuran Elemen Dalam Koleksi

Dalam Dart, ada beberapa cara untuk melakukan penelusuran elemen-elemen
dalam koleksi seperti List, Set, atau Map.
1. Menggunakan Loop for-in
Penggunaan loop `for-in` sangat berguna untuk menelusuri seluruh elemen dalam
koleksi.
a. List
var myList = [1, 2, 3, 4, 5];
for (var item in myList) {
print(item); // mencetak setiap elemen dalam list }
b. Set
var mySet = {1, 2, 3, 4, 5};
for (var item in mySet) {
print(item); // mencetak setiap elemen dalam set }
c. Map
var myMap = {'a': 1, 'b': 2, 'c': 3};
for (var key in myMap.keys) {
(key); // mencetak setiap kunci dalam map }
for (var value in myMap.values) {
print(value); // mencetak setiap nilai dalam map }
myMap.forEach((key, value) {
print('$key: $value'); // mencetak kunci dan nilai dalam map
});
2. Menggunakan Metode forEach
Metode forEach digunakan untuk melakukan tindakan tertentu pada setiap elemen
dalam koleksi.
a. List dan Set
var myList = [1, 2, 3, 4, 5];
myList.forEach((item) {
print(item); // melakukan tindakan pada setiap elemen dalam
list });
var mySet = {1, 2, 3, 4, 5};
mySet.forEach((item) {
 21

print(item); // melakukan tindakan pada setiap elemen dalam

set
});
b. Map
Untuk Map, ada dua opsi yang sama seperti contoh sebelumnya menggunakan
forEach pada kunci dan nilai atau mengakses langsung kunci dan nilai dengan
loop for-in pada keys atau values. Pemilihan metode tergantung pada
kebutuhan spesifik dan tindakan yang ingin dilakukan pada kunci dan nilai.
Metode-metode ini memungkinkan Anda untuk melakukan tindakan tertentu
pada setiap elemen dalam koleksi Anda, memudahkan dalam pemrosesan data
dalam struktur yang berbeda

4.8 Pernyataan Loncat

Pernyataan loncat (jump statement) adalah perintah yang berfungsi untuk
memindahkan eksekusi program dari satu bbaris kode tertentu ke baris lain. Dart
menyediakan lima pernyataan loncat, yaitu : break, continue, return, throw, dan
rethrow. Perintah lain yang dapat dikelompokkan ke dalam pernyataan loncat adalah
exit(), yang didefinisikan sebagai fungsi. Pernyataan loncat dalam Dart
memungkinkan Anda untuk mengontrol alur eksekusi program dengan cara melompati
atau mengubah alur eksekusi ke bagian tertentu dari kode. Jenis Pernyataan Loncat
1. Break
Pernyataan break digunakan untuk menghentikan loop atau switch statement dan
melanjutkan eksekusi program setelah blok yang dihentikan. Contoh
for (var i = 0; i < 5; i++) {
if (i == 3) {
break; // akan menghentikan loop ketika i == 3
}
print(i); // mencetak nilai i selama iterasi }
2. Continue
Pernyataan continue digunakan untuk melompati iterasi saat ini dalam loop dan
melanjutkan ke iterasi berikutnya. Contoh:
for (var i = 0; i < 5; i++) {
if (i == 2) {
continue; // akan melompati iterasi ketika i == 2
 22

}
print(i); // mencetak nilai i selama iterasi, kecuali saat i ==
2
}
3. Return
Pernyataan return digunakan untuk mengembalikan nilai dari sebuah fungsi dan
menghentikan eksekusi fungsi tersebut. Contoh:
int calculateSquare(int number) {
if (number < 0) {
return -1; // akan mengembalikan nilai -1 jika angka negatif
}
return number * number; // mengembalikan nilai kuadrat jika
angka positif }

4.9 Fungsi Exit()

Untuk menghentikan eksekusi dari program Dart secara keseluruhan, Anda
dapat menggunakan fungsi exit() yang ada dalam pustaka dart:io. Fungsi exit() dari
pustaka dart:io digunakan untuk keluar dari aplikasi Dart. Contoh penggunaan exit()
dalam Dart (harus dijalankan di lingkungan yang mendukung pustaka dart:io, seperti
aplikasi konsol atau server-side Dart.
import 'dart:io';
void main() {
// contoh aplikasi sederhana
print('Aplikasi dimulai');
// Menunggu masukan dari pengguna untuk keluar
stdin.readLineSync();
// Memanggil fungsi exit() untuk keluar dari aplikasi
exit(0);
// 0 menunjukkan keluar tanpa kesalahan, nilai lain bisa
menunjukkan kesalahan khusus
}
Namun, perlu diingat, penggunaan exit() sebaiknya dihindari dalam
pengembangan aplikasi Dart, terutama jika membuat aplikasi Flutter untuk perangkat
mobile atau web. Kebanyakan aplikasi Dart, terutama yang berbasis Flutter, tidak
menggunakan exit() secara langsung karena perilaku ini bisa menyebabkan aplikasi
berhenti secara tidak terduga.
 BAB 5
HELLO FLUTTER

5.1 Hello Flutter

Hello Flutter dalam konteks Flutter merujuk pada aplikasi sederhana pertama
yang dibuat dalam Flutter. Biasanya, aplikasi Hello Flutter ini menampilkan pesan teks
sederhana, seperti "Hello, World!", pada layar perangkat atau emulator sebagai
langkah awal dalam memahami dasar-dasar pengembangan aplikasi dengan Flutter.
Membuat aplikasi Hello Flutter dalam Flutter melibatkan pembuatan proyek baru
menggunakan perintah flutter create nama_proyek atau melalui interface IDE yang
mendukung Flutter seperti VS Code atau Android Studio. Setelah itu, kita akan
mengedit file Dart utama (biasanya main.dart) dengan menambahkan kode Flutter
dasar yang dapat menampilkan pesan "Hello, World!" di layar.
Aplikasi Hello Flutter ini umumnya digunakan untuk memperkenalkan
seseorang pada dasar-dasar pengembangan aplikasi dengan Flutter. Ini mencakup
struktur dasar aplikasi Flutter, cara membuat tampilan sederhana, dan bagaimana
menampilkan konten di layar perangkat atau emulator.

5.2 Langkah – Langkah Membuat Aplikasi Hello Flutter

Untuk membuat aplikasi Hello World di Flutter, langkah-langkahnya biasanya
sebagai berikut
1. Buat Proyek Flutter Baru
a. Gunakan perintah `flutter create namaproyek` melalui terminal atau command
prompt untuk membuat proyek Flutter baru.
b. Atau jika menggunakan IDE seperti VS Code atau Android Studio, ada opsi
untuk membuat proyek Flutter baru melalui GUI.
2. Edit File Dart Utama (biasanya `main.dart`)
a. Buka file `main.dart`.
b. Hapus kode yang ada dan gantikan dengan kode dasar untuk aplikasi Flutter.
Contoh Kode Dart untuk Aplikasi "Hello, World!" di Flutter
 24

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Hello Flutter')),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
3. Menjalankan Aplikasi
a. Gunakan perintah `flutter run` melalui terminal atau command prompt untuk
menjalankan aplikasi Flutter Anda.
b. Atau jalankan melalui IDE dengan menekan tombol 'Run'.
4. Lihat Hasilnya
a. Aplikasi akan muncul pada emulator atau perangkat fisik yang terhubung dan
menampilkan pesan "Hello, World!" di tengah layar.

Gambar 5.1 Tampilan Hello World

 BAB 6
UI 1 FLUTTER

6.1 Widget
Widget adalah komponen dasar dalam pengembangan aplikasi Flutter. Mereka
adalah elemen-elemen yang membangun UI (User Interface) dan merupakan bagian
yang sangat penting dalam membangun aplikasi Flutter. Ada dua jenis utama widget:
StatelessWidget dan StatefulWidget. Widget dalam Flutter adalah konsep yang sangat
penting karena mereka adalah elemen dasar untuk membangun tampilan UI yang
dinamis, responsif, dan menarik dalam aplikasi Flutter.
1. Stateless Widget
Widget ini bersifat statis dan tidak memiliki status internal yang dapat berubah. Ini
berarti setelah widget telah dirender, tampilannya tidak akan berubah. Contoh
StatelessWidget
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Hello, World!'),
);
}
}
2. Stateful Widget
Widget ini memiliki status internal yang dapat berubah. Ketika status widget
berubah, widget ini diperbarui dan dirender kembali. Contoh StatefulWidget:
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int counter = 0;
void incrementCounter() {
 26

setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Counter: $counter'),
RaisedButton(
onPressed: () {
incrementCounter();
},
child: Text('Increment'),
), ], );
} }

6.1.1 Konsep-konsep Penting tentang Widget

Berikut adalah konsep – konsep Build Method
1. Build Method
Setiap widget memiliki metode `build()` yang mendefinisikan tampilan widget
tersebut. Ketika widget dibuat atau statusnya berubah, Flutter memanggil `build()`
untuk merender kembali tampilannya.
2. Komposisi Widget
Widget dalam Flutter dapat disusun secara hierarkis untuk membuat tampilan yang
lebih kompleks. Widget dapat menjadi bagian dari widget lainnya.
3. Material Design dan Cupertino
Flutter menyediakan widget yang mendukung desain Material Design (untuk
Android) dan Cupertino (untuk iOS) untuk membangun aplikasi yang responsif
dan konsisten.

6.1.2 Penggunaan Widget Dasar

Widget-widget dasar ini memungkinkan pengguna untuk membuat tampilan
dasar dan lebih kompleks dalam aplikasi Flutter dengan cara yang mudah dipahami
 27

dan dioptimalkan untuk berbagai kebutuhan UI. Berikut adalah beberapa contoh
penggunaan widget dasar yang sering digunakan dalam Flutter:
1. Text Widget, Widget untuk menampilkan teks di layar.
Text('Hello, World!'); // Menampilkan teks statis

2. Container Widget, Widget untuk mengatur layout dan dekorasi.

Container(
color: Colors.blue, // Warna latar belakang
width: 100.0,
height: 100.0,
child: Text('Container Widget'), );
3. Image Widget, Widget untuk menampilkan gambar
Image.network('URL_gambar'); // Menampilkan gambar dari URL

4. Icon Widget, Widget untuk menampilkan ikon dari ikon bawaan Flutter atau ikon
kustom.
Icon(Icons.favorite); // Menampilkan ikon bawaan Flutter

5. RaisedButton / ElevatedButton Widget, Widget untuk membuat tombol dengan

latar belakang tertentu.
RaisedButton(
onPressed: () { // Logika ketika tombol ditekan
},
child: Text('Press Me'),
);

6.2 Layout
Tata letak atau layout adalah aspek penting dalam pengembangan aplikasi
Flutter yang menentukan cara susunan widget ditempatkan dalam tampilan UI.
Memahami berbagai opsi tata letak yang tersedia dapat membantu untuk membuat
tampilan yang responsif dan menarik dalam aplikasi. Layout dalam Flutter mencakup
berbagai konsep dan teknik yang penting dalam membangun tampilan UI yang
responsif, interaktif, dan menarik dalam aplikasi Flutter. Hal ini memungkinkan
pengembang untuk membuat tata letak yang sesuai dengan kebutuhan aplikasi mereka
dengan berbagai opsi yang tersedia dalam kerangka kerja Flutter.
 28

6.2.1 Jenis – Jenis Layout

Berikut adalah jenis – jenis layout dalam flutter
1. Layout Dasar
a. Row dan Column, Menyusun widget secara horizontal (row) atau vertikal
(column).
b. Container, Membungkus widget dan mengatur padding, margin, serta
dekorasi.
c. Stack, Menumpuk widget satu di atas yang lain dengan posisi yang dapat
ditentukan.
2. Layout Pengatur Ruang
a. SizedBox, Membuat kotak dengan lebar, tinggi, atau dimensi kustom.
b. Expanded, Mengisi ruang yang tersedia dalam layout dengan proporsi
tertentu.
c. Flexible, Memberikan flexibilitas pada widget dalam `Row` atau `Column`.
3. Scrolling Layouts
a. ListView, Menampilkan daftar item dengan kemampuan scrolling.
b. GridView, Menampilkan item dalam grid dengan scrolling.
c. Single Child Scroll View, Membungkus widget tunggal untuk scrolling.
4. Layout Khusus UI Mobile
a. AppBar, Menambahkan AppBar sebagai bagian atas halaman.
b. Bottom Navigation Bar, Menampilkan navigasi di bagian bawah layar.
c. TabBarView, Mengatur tampilan tab pada tab bar.
5. Layout Responsif
a. MediaQuery. Mengakses informasi perangkat seperti ukuran layar.
b. OrientationBuilder, Mengatur tampilan berdasarkan orientasi perangkat
(portrait atau landscape).
c. LayoutBuilder Membangun widget sesuai dengan ukuran tata letak yang
tersedia.
6. Animasi dan Layout Transisi
a. Hero Memberikan efek transisi animasi antara halaman atau tampilan.
b. Animated Container dan widget lainnya dalam Animated suite: Menciptakan
perubahan tampilan dengan animasi.
 29

7. Layout Terhadap Pola Desain (Design Patterns)

Penggunaan pola desain seperti BLoC, Provider, GetX, dll., untuk manajemen state
dan arsitektur aplikasi yang lebih baik.

6.3 Styling UI
Styling UI dalam Flutter adalah proses mengatur tampilan elemen-elemen
antarmuka pengguna (UI) dalam aplikasi Flutter. Ini melibatkan penggunaan properti,
gaya, dan tema untuk mengubah penampilan visual dari widget-widget dalam aplikasi.
Styling UI dalam Flutter memungkinkan pengembang untuk mengatur tampilan
aplikasi dengan lebih baik, memberikan identitas visual yang khas, dan meningkatkan
pengalaman pengguna dengan mengubah estetika dan presentasi antarmuka pengguna
aplikasi mereka.

6.3.1 Konsep Dasar Styling UI dalam Flutter

Konsep dasar style ui dalam flutter adalah sebagai berikut
1. Properti dan Gaya
Penggunaan properti seperti color, fontSize, fontWeight, fontFamily, background
Color, padding, dan margin untuk mengubah penampilan widget. Menerapkan
properti ini untuk menyesuaikan tampilan teks, latar belakang, ukuran, jarak, dan
atribut visua lainnya pada widget.
2. Tema (Theme) dalam Flutter
Mengatur tema aplikasi secara global untuk konsistensi tampilan dan penggunaan
gaya yang sama di seluruh aplikasi. Menerapkan tema dengan menggunakan
Theme untuk mengubah tampilan keseluruhan aplikasi secara cepat.
3. Gaya pada Widget Khusus
a. AppBar Styling, Mengatur gaya AppBar seperti warna, teks, dan ikon yang
ditampilkan.
b. Button Styling, Menyesuaikan tampilan tombol seperti FlatButton,
RaisedButton, dan ElevatedButton dengan warna, ukuran, dan bentuk yang
diinginkan.
c. Text Styling, Mengubah gaya teks seperti ukuran, berat, dan gaya huruf untuk
widget teks.
 30

4. Dekorasi dan Bentuk Widget

Decoration pada Container untuk menambahkan dekorasi ke widget Container`\
menggunakan properti decoration. Dan bentuk dekorasi untuk mengubah bentuk
widget menggunakan properti shape.
5. Gaya dan Animasi Lanjutan
a. Animasi Gaya, Menerapkan animasi dalam perubahan gaya menggunakan
widget seperti AnimatedContainer untuk transisi yang lebih halus.
b. Transisi Gaya, Menyediakan efek transisi gaya dengan animasi menggunakan
widget Hero atau PageRouteBuilder.
6. Responsif dan Adaptabilitas
Terdapat media query, untuk menggunakan media query untuk menyesuaikan gaya
sesuai dengan ukuran layar dan perangkat. Dan orientation builder, untuk
mengubah tampilan berdasarkan orientasi perangkat.
7. Styling Berbasis Platform
Material Design dan Cupertino untuk menyesuaikan gaya aplikasi dengan platform
yang berbeda (Material untuk Android dan Cupertino untuk iOS) untuk
mempertahankan konsistensi dan penampilan yang sesuai dengan platform.
 BAB 7
UI 2 FLUTTER

7.1 UI 2 Pada Flutter

UI 2 dalam konteks Flutter bisa merujuk pada tahap atau tingkat yang lebih
lanjut dalam pembangunan antarmuka pengguna (UI) dalam aplikasi Flutter. Ini
umumnya melibatkan pemahaman yang lebih dalam tentang konsep-konsep dan
teknik-teknik yang lebih kompleks dalam pembuatan UI yang dinamis, menarik, dan
responsif. UI 2 dalam Flutter seringkali fokus pada pengembangan UI yang lebih maju
dengan memanfaatkan widget-widget yang lebih kompleks, manajemen state yang
lebih terstruktur, teknik dan pola desain yang lebih mendalam, serta pengoptimalan
untuk responsivitas dan performa aplikasi yang lebih baik. Ini memungkinkan
pengembang untuk menciptakan pengalaman pengguna yang lebih dinamis dan
menarik dalam aplikasi Flutter mereka.

7.2 Konsep dan Fitur dalam UI 2 Flutter

Berikut adalah beberapa konsep dan fitur yang mungkin terdapat pada UI 2 Flutter

7.2.1 Animasi yang Lebih Kompleks

Animasi yang lebih kompleks dalam UI 2 Flutter melibatkan penggunaan
teknik dan widget yang lebih canggih untuk menciptakan transisi yang lebih halus,
efek yang lebih dinamis, dan animasi yang lebih kreatif. Beberapa teknik animasi
kompleks yang sering digunakan dalam UI 2 di Flutter meliputi
1. Custom Animation Controllers
a. Animation Controller, Penggunaan controller kustom untuk mengontrol
animasi dengan lebih detail, seperti durasi, kecepatan, dan interpolasi.
b. Tween Animations, Membuat transisi antara nilai-nilai menggunakan Tween
yang memungkinkan perubahan yang lebih halus dalam animasi.
 32

2. Implicit Animations
a. Animated Builder, Menerapkan perubahan ke bagian tertentu dari UI dengan
menggunakan Animated Builder untuk mengelola bagian yang diubah saat
animasi berlangsung.
b. Implicitly Animated Widgets, Menggunakan widget seperti Animated
Container, AnimatedOpacity, AnimatedPositioned, atau AnimatedSize yang
secara otomatis menangani animasi perubahan properti.
3. Custom Transitions dan Hero Animations
a. Custom Page Transitions, Membuat transisi antara layar menggunakan widget
Page Route Builder untuk mengontrol transisi navigasi.
b. Hero Animations, Membuat efek animasi transisi yang mulus antara elemen-
elemen UI yang sama di layar yang berbeda.
4. Flare Animations
Flare Integration, Menggunakan animasi dari file Flare (.flr) yang dapat
diintegrasikan ke dalam aplikasi Flutter untuk animasi yang lebih kompleks dan
interaktif.
5. Rive Animations
Rive Integration, Menggunakan animasi dari file Rive (sebelumnya bernama
Lottie) untuk animasi yang lebih kompleks dan responsif di dalam aplikasi Flutter.
6. Fungsi Transformasi dan Easing
a. Matrix4 Transformations, Menggunakan transformasi 2D dan 3D seperti
rotasi, translasi, dan skalasi untuk membuat animasi yang lebih kompleks.
b. Easing Functions, Menggunakan fungsi Curves atau Easing Functions untuk
memberikan perubahan kecepatan dalam animasi.
7. Animasi Berdasarkan Gesture
Gesture Animations, Menerapkan animasi berdasarkan interaksi pengguna seperti
swipe, drag, atau pinch menggunakan Gesture Detector atau Transform Gesture
Detector.
8. Penggabungan Animasi dan State Management yang Lebih Kompleks
Animation with State Management, Menggabungkan animasi dengan manajemen
state yang lebih kompleks seperti BLoC atau Provider untuk menciptakan UI yang
responsif dan dinamis.
 33

7.2.2 Pola Desain (Design Patterns) dan Manajemen State

Di dalam UI 2 Flutter, pemahaman yang lebih mendalam tentang pola desain
dan manajemen state sangat penting. Pola desain membantu dalam mengatur struktur
proyek dan mempertahankan kode yang terorganisir, sementara manajemen state
memastikan bahwa aplikasi dapat mengelola dan merespons perubahan data dengan
efisien. Di dalam UI 2 Flutter, pemahaman yang lebih dalam tentang pola desain
seperti BLoC, Provider, atau Redux akan membantu dalam organisasi kode dan
manajemen state yang lebih baik. Menerapkan pola desain dan manajemen state yang
tepat dapat meningkatkan kualitas kode, mempermudah pemeliharaan aplikasi, dan
memungkinkan pembangunan aplikasi yang lebih skalabel dan responsif. Beberapa
Pola Desain yang Umum Digunakan dalam UI 2 Flutter
1. BLoC (Business Logic Component)
Penempatan logika bisnis yaitu memisahkan logika bisnis dari tampilan.
Menggunakan Sink untuk input dan Stream untuk output dalam mengelola aliran
data.
2. Provider
Manajemen state yang sederhana dengan memanfaatkan Inherited Widget untuk
mengelola state aplikasi dengan mudah dan menyediakan state ke seluruh bagian
aplikasi. Dan menggunakan Scoped Model atau Change Notifier Provider untuk
menyediakan state aplikasi pada bagian tertentu.
3. Redux
Store dan Reducer untuk menerapkan konsep Store untuk menyimpan state
aplikasi dan Reducer untuk mengelola perubahan state. Serta Unidirectional Data
Flow untuk membuat arus data satu arah yang jelas dalam aplikasi.
Beberapa Manajemen State dalam UI 2 Flutter
1. Stateful Widgets, membangun Stateful Widget yang lebih besar dan mengelola
state internal dengan lebih hati-hati.
2. Alternatif Manajemen State dengan menggunakan Riverpod atau GetX untuk
manajemen state yang lebih canggih dengan sintaks yang lebih mudah.
3. Penanganan perubahan State yang lebih kompleks dengan mengelola perubahan
state asinkron dengan penggunaan async/await untuk komunikasi dengan server
 34

atau proses latar belakang lainnya. Serta menerapkan transformasi data untuk
mengubah dan memanipulasi data sebelum disimpan dalam state.

7.2.3 Komponen UI yang Kompleks

Di dalam UI 2 Flutter, penggunaan komponen UI yang lebih kompleks
memungkinkan pembangunan antarmuka pengguna yang dinamis, interaktif, dan lebih
kreatif. Menggunakan komponen-komponen UI yang lebih kompleks di dalam UI 2
Flutter memungkinkan pengembang untuk membuat tampilan yang lebih menarik dan
responsif, serta memberikan pengalaman pengguna yang lebih dinamis dan interaktif.
Kombinasi dari berbagai komponen ini memperluas kemungkinan dalam desain dan
interaksi antarmuka pengguna yang dibangun dalam aplikasi Flutter. Beberapa
komponen UI yang lebih kompleks yang sering digunakan dalam pengembangan UI 2
di Flutter meliputi
1. Custom Scroll View
Membuat Tampilan Daftar yang Fleksibel, memungkinkan pembuatan tampilan
daftar yang kompleks dan dapat digulir dengan berbagai elemen UI.
2. Sliver App Bar
AppBar yang dinamis, menyediakan AppBar yang dapat menyusut, membesar,
atau berubah sesuai dengan posisi guliran.
3. Hero Animation
Transisi yang halus, menggunakan efek animasi hero untuk transisi mulus antara
elemen-elemen UI yang sama pada layar yang berbeda.
4. Backdrop Filter
Efek Blur dan Visual menarik, menggunakan Backdrop Filter untuk menciptakan
efek blur pada latar belakang elemen tertentu.
5. Custom Painter
Menggambar UI kustom, menerapkan Custom Painter untuk menggambar elemen
UI yang kompleks dan kustom.
6. Animated Builder
Mengontrol bagian UI spesifik, menggunakan Animated Builder untuk mengontrol
bagian tertentu dari UI yang diubah saat animasi berlangsung.
 35

7. Layout Builder
Penyesuaian layout dinamis, menggunakan Layout Builder untuk membuat tata
letak yang responsif dan dinamis berdasarkan ukuran layar dan konten.
8. Transform Widget
Transformasi elemen UI, menggunakan transform widget untuk melakukan
transformasi seperti rotasi, translasi, dan skalasi pada elemen UI.
9. Custom Widgets
Widget kustom yang dibangun sendiri, membangun widget kustom untuk
menangani kebutuhan UI yang sangat spesifik dan kompleks.
10. Page View dan TabBar View
Navigasi dengan gestur berbasis halaman, menerapkan navigasi antar halaman
dengan menggunakan Page View atau TabBar View untuk berpindah antara
berbagai layar.

7.2.4 Responsif dan Adaptabilitas

Dalam UI 2 Flutter, responsifitas dan adaptabilitas menjadi aspek penting
untuk menciptakan aplikasi yang dapat menyesuaikan diri dengan berbagai perangkat,
ukuran layar, dan orientasi yang berbeda. Responsifitas dan adaptabilitas dalam UI 2
Flutter penting untuk memastikan bahwa aplikasi dapat memberikan pengalaman
pengguna yang konsisten dan baik di berbagai perangkat dan platform. Menggunakan
teknik dan widget yang tepat serta melakukan pengujian yang komprehensif dapat
membantu memastikan bahwa UI dapat menyesuaikan diri dengan baik terhadap
berbagai kondisi dan perangkat yang berbeda. Inilah beberapa poin penting tentang
responsifitas dan adaptabilitas dalam UI 2 Flutter Responsifitas UI:
1. MediaQuery, menggunakan Media Query untuk mengetahui dimensi perangkat,
orientasi, dan faktor-faktor lainnya yang memungkinkan UI menyesuaikan diri
secara otomatis.
2. Responsif terhadap perangkat, merancang UI agar dapat beradaptasi dengan baik
terhadap perangkat dengan berbagai ukuran layar, seperti ponsel dan tablet.
Sedangkan adaptabilitas UI adalah sebagai berikut
1. Orientasi Perangkat, menerapkan tampilan UI yang berbeda tergantung pada
orientasi perangkat (landscape/portrait) menggunakan Orientation Builder.
 36

2. Berbagai Platform, memastikan aplikasi responsif dan terlihat baik di berbagai

platform, seperti Android dan iOS.

7.2.5 Pengujian UI yang Lebih Mendalam

Pengujian UI yang lebih mendalam dalam UI 2 Flutter melibatkan penggunaan
berbagai teknik untuk memastikan bahwa antarmuka pengguna (UI) bekerja
sebagaimana mestinya, merespons interaksi pengguna, dan menjaga konsistensi
visual. Menerapkan berbagai teknik pengujian ini membantu memastikan bahwa UI
dalam UI 2 Flutter berfungsi sebagaimana mestinya, menawarkan pengalaman
pengguna yang konsisten, responsif, dan menyenangkan tanpa kesalahan yang
signifikan. Berikut beberapa teknik pengujian yang lebih mendalam untuk UI 2 Flutter
1. Widget Testing
Pengujian Fungsional, menerapkan widget testing untuk menguji fungsionalitas UI
dari berbagai widget dalam aplikasi dan pengujian state dan responsivitas,
memastikan bahwa state dikelola dengan benar dan respons UI terhadap interaksi
pengguna secara tepat.
2. Pengujian Responsifitas
Pengujian berbagai ukuran layer, memastikan responsifitas UI di berbagai ukuran
layar dan orientasi dengan menggunakan emulator atau perangkat fisik yang
berbeda. Pengujian perubahan orientasi, melakukan pengujian ketika perangkat
berubah dari landscape ke portrait dan sebaliknya.
3. Simulasi Interaksi Pengguna
Simulasi Gestur, melakukan simulasi gestur seperti tap, swipe, atau pinch untuk
memeriksa respons UI terhadap berbagai jenis interaksi pengguna. Dan pengujian
Input, memastikan bahwa input pengguna diakui dan direspons dengan benar.
4. Pengujian Integrasi UI
Pengujian antarmuka layar penuh, memastikan bahwa navigasi antar layar,
animasi, dan perubahan tampilan berjalan dengan lancar. Pengujian komponen UI
kustom, menguji komponen UI yang dibangun secara kustom untuk memastikan
fungsi dan tampilan yang benar.
 37

5. Pengujian Berbasis Platform

Pengujian Berbasis Material Design dan Cupertino, memastikan bahwa UI sesuai
dengan pedoman desain Material Design untuk Android dan Cupertino untuk iOS.
6. Uji Performa UI
Pengujian Kinerja, memeriksa kinerja UI untuk memastikan bahwa animasi dan
respons UI berjalan secara mulus tanpa lag atau jitter.
7. Uji Aksesibilitas
Pengujian Aksesibilitas, memeriksa apakah UI dapat diakses dengan baik oleh
pengguna dengan kebutuhan khusus seperti pembaca layar.
8. Pengujian UI Secara Terpisah dan Terintegrasi
Pengujian UI Terpisah, menguji setiap komponen UI secara terpisah untuk
memastikan fungsi dan tampilan yang benar. Dan pengujian UI Terintegrasi,
menguji UI secara keseluruhan dalam konteks aplikasi untuk memastikan integrasi
yang benar antar komponen.
 BAB 8
PROJECT

8.1 Pengenalan Project

Pada project akhir ini, kelompok kami membuat sebuah gambaran aplikasi
toko sepatu yaitu lebih tepatnya Nike Shoes Store. Pada aplikasi tersebut, terdapat tiga
gambaran screen yang bisa dijadikan sebagai bagian dari aplikasi, yaitu Intro Screen,
Dashboard Screen, dan Detail Screen.
Tujuan dari Aplikasi ini adalah untuk memudahkan pengelolaan toko sepatu
serta memudahkan para penggemar sepatu terkhusus sepatu Nike, karna pada aplikasi
ini hanya akan menampilkan berbagai tipe dan variasi dari sepatu Nike.

8.2 Intro Screen

Intro Screen atau layar pengantar adalah layar pertama yang muncul saat
pengguna pertama kali membuka aplikasi. Tujuan utamanya adalah memberikan
informasi singkat tentang fitur, navigasi, atau tujuan dari aplikasi tersebut. Ini
digunakan untuk menampilkan logo, pesan selamat datang, atau mengarahkan
pengguna untuk melakukan tindakan tertentu.
Intro Screen yang kami buat memuat gambar atau yang memperkenalkan
produk aplikasi. Pengguna dapat melewati layar ini dengan menggeser tombol "Get
Started" untuk masuk ke tampilan utama aplikasi. Intro Screen ini juga dibuat untuk
memberikan gambaran yang jelas kepada pengguna tentang apa yang dapat mereka
harapkan dari aplikasi yang mereka gunakan.
 39

Berikut adalah tampilan sebagian kode :

Gambar 8.1 Intro Kode

Berikut penjelasan dari beberapa kode

1. Animasi menggunakan Flutter Animation
Kode menggunakan AnimationController untuk mengontrol animasi. Dua animasi
yang digunakan adalah pergerakan (position) dan perubahan opasitas (opacity).
Animasi ditetapkan menggunakan Tween untuk nilai awal dan akhirnya, serta
diberikan kurva animasi menggunakan CurvedAnimation. Perubahan nilai animasi
diterapkan pada widget melalui setState() setiap kali nilai animasi berubah.
2. Tampilan UI
Menggunakan Scaffold sebagai kerangka utama dengan latar belakang berwarna
hitam. Menggunakan Stack untuk menempatkan beberapa widget di atas satu sama
lain. Menampilkan gambar logo Nike dan gambar sepatu di bagian atas layar.
Menampilkan teks intro dengan format yang kaya (rich text) dan gaya yang
berbeda-beda untuk pesan yang menarik perhatian pengguna. Tombol "Get
Started" ditampilkan dengan ikon panah yang menggunakan animasi opasitas
(opacity).
3. Navigasi
Terdapat GestureDetector yang mendeteksi gerakan vertical drag dari pengguna.
Jika pengguna menggerakkan layar ke atas dengan gerakan yang cukup sensitif,
aplikasi akan memulai transisi ke layar DashboardScreen menggunakan Page
Transition.
 40

Berikut hasil output dari introscreen

Gambar 8.2 Output Intro Screen

8.3 Dashboard Screen

Dashboard screen adalah bagian yang muncul setelah intro screen dari sebuah
aplikasi yang berfungsi sebagai pusat informasi utama atau tampilan utama yang
menyajikan ringkasan atau akses ke fitur-fitur kunci dari aplikasi tersebut. Dashboard
screen pada aplikasi ini berisi beberapa elemen yang memudahkan pengguna dalam
menjelajahi, memilih, dan membeli sepatu. Adapun beberapa kegunaan dashboard
screen ini ialah
1. Menampilkan kategori-kategori sepatu yang tersedia, misalnya lifestyle, running,
basketball, dan sebagainya. Pengguna dapat memilih kategori yang diminati untuk
melihat koleksi sepatu dalam kategori tersebut.
2. Menampilkan koleksi sepatu dengan gambar mini dan judul untuk setiap sepatu
yang ada dalam aplikasi.
3. Memungkinkan pengguna untuk melihat detail produk sepatu yang dipilih, seperti
deskripsi, bahan, ukuran yang tersedia, harga, ulasan pengguna, dan informasi
penting lainnya.
 41

Berikut adalah tampilan sebagian kode :

Gambar 8.3 Kode Dashboard Screen

Berikut penjelasan dari beberapa kode

1. Pembuatan Kategori Sepatu
buildCategories() digunakan untuk membuat tombol kategori sepatu berdasarkan
data yang di-generate oleh Data.generateCategories(). Setiap kategori
direpresentasikan oleh sebuah ElevatedButton yang menampilkan gambar dan
judul kategori.
2. Tampilan Banner Promosi
Bagian atas dari ListView menampilkan banner promosi dengan gambar dan
tombol "Buy Now" untuk produk tertentu.
3. Grid Produk
GridView.count menampilkan produk-produk sepatu dalam bentuk grid dengan
ukuran dua kolom. Setiap produk ditampilkan dalam sebuah Card yang dapat di-
tap untuk melihat detail produk.
4. Penggunaan InkWell dan Navigasi
InkWell digunakan sebagai wrapper pada Card produk, memberikan efek ketika
produk ditekan. Melalui fungsi onTap pada InkWell, aplikasi akan melakukan
navigasi ke layar DetailScreen ketika pengguna menekan salah satu produk.
5. Tombol Aksi (Floating Action Button)
Terdapat FloatingActionButton yang menempatkan tombol "Home" di bagian kiri
layar. FloatingActionButtonLocation digunakan untuk menentukan posisi dari
tombol aksi.
 42

Berikut adalah tampilan output kode

Gambar 8.4 Output Dashboard Screen

8.4 Detail Screen

Detail screen adalah halaman yang menampilkan informasi lengkap tentang
suatu produk sepatu tertentu. Halaman ini dibuka ketika pengguna memilih atau men-
tap salah satu produk dari daftar produk yang ditampilkan, seperti pada dashboard.
Beberapa isi detail screen yaitu:
1. Gambar Produk, Menampilkan gambar produk sepatu dari berbagai sudut untuk
memberikan gambaran yang jelas kepada pengguna tentang produk tersebut.
2. Detail Produk, Deskripsi lengkap tentang produk, termasuk bahan, warna, ukuran
yang tersedia, dan fitur-fitur khusus yang dimiliki sepatu.
3. Harga, Menampilkan harga produk, rating, dan informasi tentang ketersediaan
varian lainnya.
4. Ulasan Pengguna, Bisa berupa ulasan atau rating dari pengguna lain yang telah
membeli dan menggunakan produk tersebut.
 43

Berikut adalah tampilan sebagian kode :

Gambar 8.5 Kode Detail Screen

Berikut penjelasan dari beberapa kode

1. AppBar dan Tampilan Utama
AppBar menampilkan ikon tombol kembali, judul halaman, dan ikon pencarian.
Body terdiri dari beberapa bagian, termasuk gambar produk dengan fitur rotasi 360
derajat menggunakan paket ImageView360, informasi produk seperti nama, rating,
deskripsi, dan pilihan warna produk.
2. ImageView360
Widget ImageView360 memungkinkan pengguna untuk melihat gambar produk
dari berbagai sudut. Menggunakan daftar gambar yang disediakan dalam
imageList dari AssetImage untuk memberikan tampilan 360 derajat.
3. Informasi Produk
Menampilkan nama produk, rating, jumlah ulasan, deskripsi produk, serta pilihan
warna produk dalam bentuk widget ListView horizontal.
4. Pilihan Warna Produk
Membangun widget buildColorWidgets yang menampilkan pilihan warna produk
berdasarkan data yang tersedia.
5. Navigasi Kembali
Dengan menggunakan tombol kembali, pengguna dapat kembali ke layar
sebelumnya.
 44

Berikut adalah tampilan output kode :

Gambar 8.6 Output Derail Screen

 BAB 9
PENUTUP

9.1 Kesimpulan
Melalui pemahaman tentang pemrograman mobile, telah terungkap betapa
pentingnya peran teknologi ini dalam memengaruhi cara kita berinteraksi dengan
dunia digital. Beberapa point penting dari makalah ini meliputi
1. Platform seperti Android dan iOS, serta framework seperti Flutter atau Dart,
memainkan peran utama dalam memfasilitasi pembuatan aplikasi mobile yang
inovatif dan responsif.
2. Pengalaman pengguna yang baik (user experience/UX) menjadi kunci kesuksesan
sebuah aplikasi mobile. Desain yang intuitif dan responsif sangat berkontribusi
terhadap daya tarik dan keberhasilan sebuah aplikasi.
3. Menjamin kompatibilitas lintas platform dan keamanan aplikasi menjadi aspek
yang tak boleh diabaikan dalam pengembangan aplikasi mobile.

9.2 Saran
Dari makalah ini, beberapa saran dapat diberikan untuk pengembangan lebih
lanjut dalam pemrograman mobile
1. Teruslah eksplorasi berbagai platform dan framework dalam pengembangan
aplikasi mobile untuk menemukan alat yang paling sesuai dengan kebutuhan
proyek.
2. Prioritaskan pengalaman pengguna yang baik dalam desain aplikasi, dengan
memperhatikan aspek interaktif, visual, dan fungsional.
3. Jangan abaikan aspek keamanan dan performa aplikasi. Teruslah memperbarui
pengetahuan tentang praktik keamanan terkini dan optimisasi kinerja aplikasi.
4. Pemrograman mobile terus berkembang dengan cepat. Selalu perbarui diri dengan
teknologi terkini dan pelajari praktik terbaik melalui buku, kursus online, atau
komunitas pengembang.
 DAFTAR PUSTAKA

https://himasis.org/artikel/320-materi-pengenalan-dan-cara-kerja-flutter
https://idmetafora.com/news/read/743/Mengenal-Flutter-Sebuah-Teknologi-Yang-
Diciptakan-Google.html
https://repository.unikom.ac.id/68459/1/Belajar%20Bahasa%20Pemrograman%20Da
rt.pdf
https://codekey.id/dart/variabel-dart/
https://repository.unikom.ac.id/68461/1/Input%20dan%20Output%20dalam%20Dart.
pdf
https://www.barajacoding.or.id/control-flow-pada-dart/