UNIVERSITAS PAMULANG
TEKNIK INFORMATIKA
MOBILE PROGRAMMING
Pertemuan 2
Abstract
Dasar-dasar Flutter: Scaffold, assets, [Link], icons, emulator/simulator
Iyu Priatna
dosen03152@[Link]
1. Membuat Project Flutter Pada Visual Studio Code
a. Buka VS Code, lalu tekan Ctrl + Shift + P untuk membuka Command Palette.
b. Ketik Flutter: New Project, lalu pilih opsi tersebut.
c. Pilih jenis proyek Flutter Application.
d. Pilih lokasi penyimpanan proyek.
e. Tentukan nama proyek (misalnya myApp).
f. Tunggu hingga Flutter selesai mengunduh dependencies, jika sudah selesai bisa menuju folder
‘lib’ dan memilih file ‘[Link]’. File ini merupakan titik awal dari mana aplikasi akan mulai
dijalankan.
2. Flutter Scaffold
Scaffold adalah sebuah widget dalam flutter yang menyediakan banyak widget seperti Drawer,
SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, dan lain-lain. Scaffold akan
memperluas atau menempati seluruh layar perangkat. Widget ini akan menempati ruang yang
tersedia. Scaffold akan memberikan kerangka untuk menerapkan layout dasar material design dari
aplikasi.
Constructor dari Class Scaffold
Constructor merupakan sebuah method atau fungsi khusus yang digunakan untuk membuat instance
atau object dari class. Dalam konteks class Scaffold di Flutter, constructor digunakan untuk
menginisialisasi dan mengatur berbagai properti dan widget yang terdapat pada tampilan aplikasi.
Sintaks constructor class Scaffold di Flutter dapat dituliskan dengan format sebagai berikut:
Properti dari Class Scaffold
Class Scaffold dalam Flutter adalah widget yang menyediakan kerangka kerja dasar untuk membangun
aplikasi Flutter yang lengkap dengan mengintegrasikan widget-widget umum seperti AppBar, Drawer,
BottomNavigationBar, dan lain-lain.
Salah satu properti penting dari class Scaffold adalah “appBar” yang bertipe AppBar. Properti ini
digunakan untuk menentukan AppBar yang akan ditampilkan di bagian atas aplikasi.
Selain itu, class Scaffold juga memiliki properti “body” yang bertipe Widget. Properti ini digunakan
untuk menentukan isi utama dari aplikasi. Isi utama ini bisa berupa widget seperti ListView, GridView,
Column, Row, atau widget lainnya.
Class Scaffold juga memiliki beberapa properti lainnya seperti “floatingActionButton”,
“bottomNavigationBar”, “drawer”, “endDrawer”, “persistentFooterButtons”, dan lain-lain yang bisa
digunakan untuk menambahkan fungsi dan interaksi tambahan pada aplikasi.
Secara keseluruhan, class Scaffold sangat penting dalam membangun aplikasi Flutter karena
menyediakan kerangka kerja dasar yang mudah digunakan dan dapat disesuaikan dengan kebutuhan
pengembang.
a. appBar
Properti ini menampilkan sebuah bilah horizontal yang biasanya ditempatkan di bagian atas
Scaffold. Properti appBar menggunakan widget AppBar yang memiliki properti sendiri seperti
elevation, title, brightness, dan sebagainya.
b. body
Properti ini akan menampilkan konten utama atau primer pada Scaffold. Konten ini akan berada
di bawah appBar dan di bawah floatingActionButton. Secara default, widget yang berada di dalam
body akan ditampilkan pada sudut kiri.
c. floatingActionButton
FloatingActionButton adalah sebuah tombol yang biasanya diletakkan di sudut kanan bawah.
Tombol ini berupa sebuah ikon yang mengambang di atas konten layar dan tetap berada di posisi
yang sama bahkan jika kita menggulir halaman.
d. drawer
Drawer adalah panel menu yang muncul di samping layar aplikasi. Untuk membuka menu
tersebut, pengguna harus menggeser layar ke kiri atau ke kanan, sesuai dengan tindakan yang
telah ditentukan. Ikon untuk membuka drawer juga secara otomatis disediakan pada AppBar pada
posisi tertentu. Tindakan membuka drawer juga sudah diatur secara otomatis oleh komponen
Scaffold.
e. bottomNavigationBar
Properti bottomNavigationBar adalah seperti menu yang berada di bagian bawah Scaffold. Kita
sering melihat navigation bar ini pada kebanyakan aplikasi. Kita bisa menambahkan beberapa ikon,
teks, atau keduanya dalam bar sebagai item.
f. backgroundColor
Properti ini digunakan untuk menentukan warna dari widget Scaffold secara keseluruhan.
g. floatingActionButtonAnimator
Properti ini digunakan untuk memberikan animasi pada tombol floatingActionButton.
h. primary
Properti ini untuk menentukan apakah Scaffold akan ditampilkan atau tidak.
i. drawerScrimColor
Properti ini digunakan untuk menentukan warna konten utama saat drawer dibuka.
j. bottomSheet
Properti ini menerima sebuah widget (final) sebagai object untuk menampilkannya di bagian
bawah layar.
k. drawerDragStartBehaviour
Properti ini memuat object DragStartBehavior enum untuk menentukan perilaku drag pada
drawer.
l. drawerEdgeDragWidth
Properti ini menentukan area di mana swipe atau drag akan mengakibatkan pembukaan drawer.
Dan properti ini menerima double sebagai object.
m. drawerEnableOpenGesture
Properti ini memuat nilai boolean sebagai object untuk menentukan apakah gesture drag akan
membuka drawer atau tidak, secara default properti ini diatur ke true.
n. endDrawer
Properti endDrawer menerima widget sebagai parameter. Ini mirip dengan Drawer yang muncul
di sisi kanan layar, berbeda dengan drawer yang muncul dari sisi kiri.
o. endDrawerEnableOpenGesture
Properti ini juga menerima nilai boolean sebagai object untuk menentukan apakah gesture drag
akan membuka endDrawer atau tidak.
p. extendBody
Properti extendBody menerima nilai boolean sebagai object. Secara default, properti ini selalu
false tetapi tidak boleh null. Jika diatur ke true di hadapan bottomNavigationBar atau
persistentFooterButtons, maka tinggi mereka ditambahkan ke body dan dipindahkan di bawah
body.
q. extendBodyBehindAppBar
Properti ini dapat menerima nilai boolean sebagai object. Secara bawaan, properti ini selalu diatur
ke false dan tidak boleh bernilai null. Jika properti diatur ke true, app-Bar yang berada di atas body
akan diperluas sehingga tingginya akan ditambahkan ke body. Properti ini berguna ketika warna
app-Bar tidak sepenuhnya opaque.
r. floatingActionButtonLocation
Properti ini bertanggung jawab untuk menentukan lokasi floatingActionButton.
s. persistentFooterButton
Properti ini menerima daftar widget, biasanya berupa tombol yang ditampilkan di bawah scaffold.
t. resizeToAvoidBottomInsets
Properti ini menerima nilai Boolean sebagai object. Jika diatur ke true, widget floating pada
scaffold akan menyesuaikan ukuran mereka untuk menghindari mengganggu keyboard di layar.
Jalankan flutter Anda dengan mengetikan perintah flutter run di terminal visual studio code atau
lalu pilih device yang akan menjadi tempat App berjalan.
Ketikkan 2 jika flutter ingin berjalan di chrome, dan tunggu sampai aplikasi muncul.
3. Flutter [Link]
[Link] adalah adalah file YAML (Yet Another Markup Language) yang digunakan dalam proyek
Flutter untuk mengelola dependensi dan sumber daya. File ini berada di akar direktori proyek Anda
dan menyediakan format terstruktur untuk mendeklarasikan dependensi, aset, batasan versi, dan
banyak lagi pada proyek Anda. seperti:
a. Nama & versi aplikasi
b. Dependencies (package yang digunakan)
c. Assets (gambar, font, dll.)
d. Informasi tentang Flutter SDK
Salah satu tujuan utama [Link] ini adalah untuk mengelola ketergantungan proyek Anda.
Ketergantungan adalah paket atau pustaka eksternal yang diandalkan aplikasi Flutter Anda untuk
menyediakan fungsionalitas tambahan.
Dengan mendeklarasikan ketergantungan dalam [Link] file, Anda mengaktifkan pengelola
paket Flutter, pub, untuk mengambil dan mengelola paket tersebut untuk proyek Anda.
4. Flutter Assets
Untuk menambahkan aset lokal di [Link] di Flutter, ikuti langkah-langkah berikut:
a. Buat folder untuk aset lokal Anda dalam direktori proyek Anda. Misalnya, Anda dapat membuat
folder “assets” di dalam direktori “lib” Anda. Anda juga dapat membuat folder terpisah jika Anda
ingin.
b. Tambahkan aset lokal Anda ke folder yang Anda buat. Misalnya, jika Anda ingin menambahkan
gambar, letakkan gambar tersebut di dalam folder “assets/images”.
c. Buka file [Link] yang terletak di direktori proyek Anda.
d. Tambahkan baris berikut di bawah bagian flutter:
flutter:
assets:
- assets/images/
Baris ini akan menambahkan folder “images” ke aset Anda. Anda juga dapat menambahkan aset
individu jika Anda hanya ingin menambahkan satu atau dua file.
flutter:
assets:
- assets/images/[Link]
e. Jalankan flutter pub get pada terminal. Perintah ini akan memperbarui dependensi proyek Anda
dan memungkinkan aplikasi Anda mengakses aset yang ditambahkan.
Setelah ditamahkan assets maka struktur file [Link] akan seperti:
Struktur proyek setelah menambahkan folder assets:
Untuk pemanggilan assets yang telah ditambahkan ke dalam body bisa dengan menambahkan
sintak:
[Link]("assets/images/[Link]")
Referensi:
icons:
[Link]
Materi:
[Link]
[Link]
Latihan:
Backup dan replace [Link] pada project Anda dengan script berikut: