MODUL PRAKTIKUM

PEMROGRAMAN MOBILE
(FLUTTER)

DISUSUN OLEH ASEP INDRA SYAHYADI., M. KOM.

Nama : ...................................................
NIM : ...................................................
Kelas : ...................................................

LABORATORIUM JURUSAN TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI ALAUDDIN MAKASSAR
 LEMBAR KONTROL PRAKTIKUM

Nama : NIM : Kelas :

Tanda Tangan
Prak. Hari/Tanggal Materi Keterangan
Dosen/ Asisten

10

Catatan :
Setiap aktivitas praktikum wajib sepengetahuan Dosen atau Asisten melalui lembar tanda
tangan kartu kontrol ini.

©AIS Pemrograman Mobile 2

 PENDAHULUAN

A. Dart

Dart adalah bahasa pemrograman open source dan tujuan umum. Dart dikembangkan
oleh Google dan ditujukan untuk membuat aplikasi multiplatform seperti seluler, desktop,
dan web.

Bahasa Dart adalah tipe safe; Dart menggunakan pengecekan tipe statis untuk
memastikan bahwa nilai variabel selalu cocok dengan tipe statis variabel. Meskipun tipe
bersifat wajib, anotasi tipe bersifat opsional karena inferensi tipe. Sistem pengetikan Dart
juga fleksibel, memungkinkan penggunaan tipe dinamis yang dikombinasikan dengan
pemeriksaan runtime, yang dapat berguna selama eksperimen atau untuk kode yang sangat
dinamis.

Dart menawarkan sound null safety, artinya nilai tidak boleh nol kecuali Anda
mengaturnya. Dengan sound null safety, Dart dapat melindungi Anda dari pengecualian nol
saat runtime melalui analisis kode statis. Tidak seperti banyak bahasa null-safe lainnya,
ketika Dart menentukan bahwa suatu variabel tidak dapat dibatalkan, variabel
itu selalu tidak dapat dibatalkan. Jika Anda memeriksa kode yang sedang berjalan di
debugger, Anda akan melihat bahwa non-nullability dipertahankan saat runtime
(karenanya terdengar aman).

Dart merupakan bahasa dasar dari Flutter. Sejak kemunuculannya Flutter, Dart kembali
menjadi pusat perhatian. Saat ini sudah banyak perusahaan yang menggunakan Flutter
dalam aplikasinya.

B. Flutter

Flutter adalah toolkit cross-platform UI yang dirancang untuk memungkinkan

penggunaan kembali kode di seluruh sistem operasi seperti iOS dan Android, dan
memungkinkan aplikasi untuk berinteraksi langsung dengan layanan platform yang
mendasarinya. Tujuannya adalah untuk memungkinkan pengembang menghadirkan
aplikasi berperforma tinggi yang terasa alami di berbagai platform.
Selama pengembangan, Aplikasi Flutter berjalan di VM yang menawarkan hot
reload perubahan stateful tanpa perlu kompilasi ulang secara penuh. Untuk rilis,
aplikasi Flutter dikompilasi langsung ke kode mesin, baik instruksi Intel x64 atau ARM,
atau ke JavaScript jika menargetkan web. Kerangka kerja ini bersifat open source,
dengan lisensi BSD yang permisif, dan memiliki ekosistem yang berkembang pesat
dari paket pihak ketiga yang melengkapi fungsionalitas dari core library.

©AIS Pemrograman Mobile 3

 BAB I
INSTALASI & HELLO WORLD
©AIS Pemrograman Mobile 4
Tujuan
⚫ Mahasiswa dapat mengetahui kebutuhan-kebutuhan instalasi Flutter
⚫ Mahasiswa dapat melakukan instalasi Flutter pada perangkat Laptop/PC
⚫ Mahasiswa dapat membuat projek pertama Flutter
Deskripsi
Untuk memulai membuat atau mengembangkan aplikasi flutter maka perlu
melakukan instalasi pada perangkat Laptop/PC yang akan digunakan. Untuk
perangkat yang telah terinstal Android Studio maka telah memiliki beberapa
komponen yang dibutuhkan dalam development dan building flutter sehingga lebih
memudahkan dalam instalasi.

Tahapan Praktikum
A. Persiapan
a) Download SDK Flutter
SDK (Software Development Kit) adalah sekumpulan alat yang dapat
digunakan oleh pembuat aplikasi untuk mengembangkan aplikasi yang
dikustomisasi untuk ditambahkan, atau dihubungkan dengan, program lain.
Dengan SDK, programmer dapat mengembangkan aplikasi untuk platform
tertentu. Silakan Download SDK Flutter pada situs flutter
(https://docs.flutter.dev/development/tools/sdk/releases). Pilih jenis OS yang
digunakan dan download versi flutter yang stabil.

©AIS Pemrograman Mobile 5

 b) Download Command Line Tools
Dalam pengembangan aplikasi dibutuhkan Command LIne Tools untuk
mengeksekusi setiap paket pada SDK Flutter (Jika di OS anda telah terinstal
Android Studio maka tidak perlu menginstal Command Line Tools). Untuk
download Command Line Tools dapat diakses melalus situs
(https://developer.android.com/studio). Silakan download sesuai dengan
platform yang anda gunakan.

c) Download Open JDK

OpenJDK adalah versi open-source dari kit pengembangan Java. Kit
pengembangan Java adalah sumber daya utama untuk aplikasi yang
menggunakan platform Java. Karen Aplikasi Mobile menggunakan binary java
maka perlu menginstal JDK (Java Development Kit).
Untuk mendapatkan OpenJDK dapat didownload pada situs
(https://adoptopenjdk.net). Silakan download sesuai platform perangkat anda
seperti pada gambar di bawah ini:

©AIS Pemrograman Mobile 6

 d) Instal Visual Code
Untuk menunjang pengkodean pada flutter maka digunakan editor Visual
Studio Code (VS Code). Aplikasi VS Code dapat diperoleh dari situs visual studi
(https://code.visualstudio.com/download)

B. Konfigurasi & Instalasi

1. Buat folder Android di Partisi C
2. Buat folder SDK didalam folder Android
3. Buat folder cmdline-tools/latest didalam folder sdk. (Abaikan jika sudah
menginstal Android Studio).
Struktur folder akan seperti di bawah ini:

©AIS Pemrograman Mobile 7

 4. Extrak SDK flutter ke folder Android. Zip file Flutter yang di download
sebelumnya pindahkan folder “flutter” yang ada di file zip ke dalam folder
“Android”

5. Extrak Command Line Tools ke dalam folder latest. Zip file Command Line
Tools yang telah di download sebelumnya lakukan extraksi semua file ke
dalam folder cmdline-tools/latest

©AIS Pemrograman Mobile 8

C. Setting Flutter
1. Set Environment Variable.
Silakan buka CMD lalu ketik :
a. setx ANDROID_HOME c:\Android

b. setx Path C:\Android\flutter\bin; C:\Android\sdk\cmdline-tools\latest\bin

Jika sudah melewati step diatas maka variabel yang ditambahkan dapat
dilihat pada environment variable seperti pada gambar di bawah ini:

©AIS Pemrograman Mobile 9

 2. Instal Open JDK. Lakukan instalasi Open JDK pada file yang telah didownload
sebelumnya (dengan klik 2x)

3. Pastikan Java telah terinstal dengan ketik di CMD perintah java -version dan
akan menampilkan versi java seperti contoh gambar di bawah ini:

©AIS Pemrograman Mobile 10

 4. Jalankan perintah sdkmanager “platform-tools” di CMD dan ikuti petunjuk
sampai selesai. (Abaikan jika sudah terpasang Android Studio pada
perangkat anda)

5. Jalankan perintah sdkmanager “platform;android-30” di CMD. (Abaikan

jika sudah terpasang Android Studio pada perangkat anda)
6. Jalankan perintah sdkmanager “build-tools;30.0.0” di CMD. (Abaikan jika
sudah terpasang Android Studio pada perangkat anda)
7. Jalankan perintah sdkmanager --licenses di CMD dan ikuti petunjuk sampai
selesai. (Abaikan jika sudah terpasang Android Studio pada perangkat
anda)
8. Jalankan perintah flutter doctor --android-licenses di CMD. (Abaikan jika
sudah terpasang Android Studio pada perangkat anda)
9. Jalankan perintah flutter doctor. Cek summary dari hasil instalasi dan
pastikan semuanya sudah terceklis dan tidak ada issue yang berarti

10. Instal Extension Flutter di Visual Studio Code (VS Code). Di aplikasi visual
studio code Pilih Extension dan Ketikkan Flutter. Kemudian Klik Install.

©AIS Pemrograman Mobile 11

D. Membuat Hello World
Untuk memulai pengembangan aplikasi gunakan Aplikasi Development
Visual Studio Code (VS Code). Silakan ikuti petunjuk di bawah ini:
1. Pilih Menu View > Command Palette.
2. Tipe “flutter”, dan pilih Flutter: New Project.
3. Pilih Application.
4. Pilih direktori utama untuk folder projek baru yang akan dibuat.
5. Masukkan nama projek, belajar_flutter lalu enter.
6. Tunggu sampai projek baru terbuat dan file main.dart telah muncul. Kode
untuk aplikasi yang terbuat ada di lib/main.dart.
7. Hapus seluruh isi kode pada file main.dart lalu timpa dengan kode dibawah
ini:

©AIS Pemrograman Mobile 12

 8. Jalankan Aplikasi dengan Device yang tersedia.
Untuk menjalankan kode flutter yang telah dibuat dapat menggunakan
emulator atau perangkat yang tersambung langsung dengan Perngkat
komputer/PC anda. Untuk menggunakan emulator dapat menggunakan
emulator bawaan dari Android Studio atau Menginstal sendiri emulator
seperti Bluestack, Genymotion (https://www.genymotion.com/download/),
Droid4X
Untuk menjalankan kode flutter dapat juga menggunakan Chrome Web
atau Windows Desktop. Untuk memilih Device yang digunakan untuk
emulator silakan klik sudut kanan bawah (No Device Connected) kemudaian
pilih device yang diinginkan

©AIS Pemrograman Mobile 13

 Selanjutnya pilih menu Run > Start Debugging atau tekan F5. Projek
akan di debug dan akan launch seperti pada gambar di bawah ini:

9. Lakukan improvisasi dengan mengubah title dan body content.

Tugas Mandiri

.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
...............

©AIS Pemrograman Mobile 14

 BAB II
IMPLEMENTASI LAYOUT

Tujuan
⚫ Mahasiswa dapat mengetahui layout pada pada flutter
⚫ Mahasiswa dapat mengimplementasikan layout pada flutter

Deskripsi
Layout digunakan untuk mengatur widget seperti kolom, baris dan tata letak
lainnya. Ada dua jenis yaitu Single-child dan Multiple-child layout widget.

Tahapan Praktikum
A. Layout
1. Single Child Layout Widget
Sesuai dengan namanya, Widget ini hanya bisa menampung 1 (satu) buah
child saja, misalnya : Padding, Container, Card, Expanded, Flexible, Center,
GestureDetector, Positioned, SafeArea, SingleChildScrollView, dll.. Berikut
contohnya:
a) Padding
Padding digunakan untuk memberikan jarak (ruang) atas, bawah, kanan
dan kiri dari child widgetnya, untuk memberikan jarak gunakan property
padding dengan nilai dari EdgeInsets...(double).
misalnya padding: EdgeInsets.all(16.0) akan memberikan jarak disemua
sisi 16.0, padding: EdgeInsets.only(left: 16.0) hanya bagian kiri saja, padding:
EdgeInsets.only(left:16.0, right: 16.0) memberikan jarak kiri dan kanan 16.0.

Contoh Code (1)

©AIS Pemrograman Mobile 15

 b) Expanded
Widget ini digunakan jika kita ingin memenuhi ruang yang ada pada,
Misalnya: Row, Column, atau Flex, jika child widget yang menggunakan
Expanded lebih dari 1 maka ukurannya akan dibagi sesuai dengan flex
factor.

Contoh Code (2)

c) Center
Seperti namanya, widget ini digunakan untuk meletakkan childnya di
tengah.

©AIS Pemrograman Mobile 16

 Contoh Code (3)

2. Multiple Child Layout Widget

Layout (tata letak) Widget digunakan untuk tata letak dari child widget,
pada Flutter ada dua jenis Layout Widget, yang pertama adalah Single Child
Layout dan yang kedua adalah Multi Child Layout. Multi Child Layout akan
menggunakan properti children bertipe array Widget, sedangkan Single
Child Layout akan menggunakan properti child bertipe Widget.

Multi Child Layout

Multi-Child Layout Widget digunakan untuk meletakkan child widget

yang akan ditampilkan jika lebih dari satu, adapun widget ini terdiri dari:
Column, Row, Flex, ListView, Stack. Layout ini baik digunakan untuk
komponen yang sudah kita ketahui ukurannya, seperti buttons, textboxes.
dll, layout ini juga baik digunakan ketika widget yang kita letakkan pada
layout ini tidak meng-overflow layar, maksud dari overflow adalah ukuran
widget lebih besar dari layar smartphone. Layout ini kurang baik untuk
diguankan pada komponen yang ukurannya dinamis, misalnya Widget Text
yang akan menampilkan data yang diambil dari server, dimana kita tidak
tahu ukuran (jumlah) data yang akan ditampilkan, jika kita mendapat kasus
seperti itu maka lebih baik kita menggunakan Table, karena Table dapat
menangani text overflow dengan baik.
Terkadang kita menghadapi kasus dimana ketika menggunakan Layout
Widget ini, child yang kita buat tidak pas pada area dari layar smartphone,

©AIS Pemrograman Mobile 17

 Hal ini membuat garis kuning hitam (chevrons) terlihat seperti gambar
berikut disertai keterangan error pada console

Berikut Contoh Widget dengan layout Multiple-child layout:

a) Column
Widget Column akan membuat layout secara vertikal (dari atas
kebawah)

Untuk mengatur posisi dari child widgetnya, kita dapat menggunakan

mainAxisAlignment, silahkan ber-eksperimen dengan pilihan dari
MainAxisAlignment.

Contoh Code (4)

©AIS Pemrograman Mobile 18

 b) Row
Widget Row, digunakan untuk meletakkan Widget secara Horizontal,
sama seperti Column, kita bisa menggunakan MainAxisAlignmen untuk
menentukan layoutnya, jika ukuran komponen lebih lebar dari layar
smartphone makan akan menampilkan error dan chevron akan ditampilkan,
widget Row mirip dengan Column, perbedaannya adalah Column untuk
vertikal dan Row untuk Horizontal.

Contoh Code (5)

Column (

children: <Widget>[

Text('Belajar', style: TextStyle( fontSize: fontSize, backgroundColor: color) ),

Text('Pemrograman', style: TextStyle( fontSize: fontSize, backgroundColor: color) ),

Text('Mobile', style: TextStyle( fontSize: fontSize, backgroundColor: color) ),

],

B. Build Dynamic Layout

Build Dynamic Layout adalah sebuah widget yang digunakan untuk membuat
tampilan secara dinamis. Contohnya pada ListView dan GridView daripada membuat
widget tersebut seacara berulang-ulang lebih baik menggunakan sebuah builder.
1. ListView.builder
Widget ListView memiliki sebuah builder yang artinya beberapa jumlah
model Widget yang sama dapat kita buat hanya 1 model tanpa perlu kita
copy-paste berulang-ulang.

©AIS Pemrograman Mobile 19

 Contoh Code (6)

2. GridView.builder
GridView digunakan untuk membuat sebuah layout yang bermodelkan
sebuah grid atau layout yang berbentuk kotak-kotak (galeri)
Contoh Code (7)

©AIS Pemrograman Mobile 20

Tugas Mandiri
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
...............

©AIS Pemrograman Mobile 21

 BAB III
IMPLEMENTASI FORM DAN NAVIGASI

TUJUAN
⚫ Mahasiswa dapat mengimplementasikan form pada flutter
⚫ Mahasiswa dapat memahami navigasi pada flutter
⚫ Mahasiswa dapat mengimplementasikan navigasi pada flutter

DESKRIPSI
Dalam membuat projek aplikasi mobile pastinya tidak lepas dengan penggunaan
form untuk memberikan inputan data oleh pengguna yang akan dikirimkan ke server
atau ke lokal penyimpanan. Oleh karena itu perlunya mengetahui penggunaan
widget form dalam flutter. Dan untuk membuat aplikasi mobile yang multi halaman
maka perlu memahami penggunaan navigasi dalam pembuatan aplikasi android
menggunakan Flutter.

TAHAPAN PRAKTIKUM
A. Form
Form merupakan sebuah widget penampung yang digunakan untuk
mengelompokan beberapa form field widget.
a) Text Field.
Textfield merupakan bidang text yang memungkinkan pengguna
memasukkan text.
Contoh Code (1). Penggunaan kode textfield pada password

Contoh Code (2)

©AIS Pemrograman Mobile 22
 TextFormField(

decoration: const InputDecoration(

icon: Icon(Icons.person),

hintText: 'What do people call you?',

labelText: 'Name *',

),

onSaved: (String? value) {

// This optional block of code can be used to run

// code when the user saves the form.

}, validator: (String? value) {

return (value != null && value.contains('@')) ? 'Do not use the @

char.' :null;

},

b) Checkbox
Contoh Code (3)
Checkbox(
activeColor: Colors.black,
onChanged: (value) {
_checkBoxVal = value!;
setState(() {});
},
value: _checkBoxVal,
)
c) Dropdown

©AIS Pemrograman Mobile 23

 Dropdown memungkinkan pengguna memilih dari sejumlah item. Tombol
menunjukkan item yang dipilih saat ini serta panah yang membuka menu
untuk memilih item lain.

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: MyStatefulWidget(),
),
),
);
}
}

class MyStatefulWidget extends StatefulWidget {

const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String dropdownValue = 'One';

@override

©AIS Pemrograman Mobile 24

 Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
}

Navigator
Navigator merupakan sebuah widget yang digunakan untuk melakukan
perpindahan dari satu halaman ke halaman yang lain sekaligus dapat mengirimkan
sebuah variabel di dalamnya. Berikut perintah-perintah untuk memanggil Widget
Navigator:
d) Navigator.push()

©AIS Pemrograman Mobile 25

 Method Navigator.push() digunakan untuk berpindah dari activity pertama
ke Halaman selanjutnya dan ketika di halaman kedua kita menekan tombol
back atau kembali maka kita akan dialihkan ke halaman pertama.

Keterangan: Page2() merupakan nama class yang telah dibuat

sebelumnua
e) Navigator.pop()
Method Navigator.pop digunakan untuk kembali kehalaman sebelumnya
(menghancurkan halaman yang aktif)

f) Navigator.pushReplacement()
Method Navigator.pushReplacement() digunakan untuk perpindahan
halaman dari satu halaman ke halaman lain, akan tetapi ketika tombol
kembali ditekan maka halaman sebelumnya di-destroy

B. Contoh Kode Lengkap

©AIS Pemrograman Mobile 26

©AIS Pemrograman Mobile 27
©AIS Pemrograman Mobile 28
Tugas Mandiri
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
...............

©AIS Pemrograman Mobile 29

 BAB IV
DRAWER NAVIGATION

TUJUAN
⚫ Mahasiswa dapat mengenal Drawer Widget flutter
⚫ Mahasiswa dapat membuat Drawer Navigation pada flutter

DESKRIPSI
Menu atau Navigasi dalam aplikasi memudahkan pengguna untuk mengakses
tiap halaman didalam aplikasi. Untuk membuat menu navigasi menggunakan di
flutter dapat menggunakan Drawer Wdiget. Drawer widget merupakan single child
widget yang artinya hanya dapat memiliki satu child widget di dalamnya. Karena
Drawer hanya memiliki properti child dan bukan children, maka untuk menampatkan
item-item lain bisa menggunakan ListView widget. Sebenarnya tidak ada keharusan
menggunakan ListView namun keuntungan menggunakan ListView widget
dibandingkan dengan column atau widget lainnya yaitu untuk memudahkan dalam
mengatur list Item dan vertical scrolling apabila item menu melebihi tinggi layar.
Anatomi Drawer
Anatomi dari sebuah navigation drawer menurut material design itu ada
delapan (8) point, namun disini kita sederhanakan saja menjadi 4 bagian yaitu
1. Header,
2. List Item,
3. Divider dan
4. Subtitle

Jenis Drawer

©AIS Pemrograman Mobile 30

 Jenis Drawer navigasi pada flutter dibagi menjadi dua sesuai dengan letak
posisi drawer itu sendiri yaitu drawer dan endDrawer. Drawer yang muncul di
sebelah kiri dinamakan drawer, sedangkan apabila muncul dari sebelah kanan
dinamakan endDrawer karena menggunakan properti endDrawer

Posisi icon masing-masing drawer berbeda sesuai dengan properti yang

digunakan

TAHAPAN PRAKTIKUM
1. Buat projek flutter baru dengan nama belajar_flutter_4 atau gunakan projek
flutter yang ada. Dalam folder lib, buat file baru bernama nav-drawer.dart
├── lib
│ ├── main.dart
│ └── nav-drawer.dart
2. Buka file nav-drawer.dart dan ketikan kode dibawah ini:

©AIS Pemrograman Mobile 31

Perhatikan fungsi _drawerHeader dan _drawerItem pada kode diatas.

_drawerHeader : Sebuah local function yang akan me-return DrawerHeader widget

_drawerItem : Lokal Function untuk me-return DrawerItem widget

Divider : untuk membuat garis pemisah antar menu

Padding dan Text digunakan untuk membuat subtitle navigation bar. Kita tidak pisahkan ke function
terpisah seperti drawerHeader dan drawerItem karena bentuknya yang sederhana dan hanya
menggunakannya satu kali.

©AIS Pemrograman Mobile 32

3. Masih pada file nav-drawer.dart, tambahkan function _drawerHeader()
dibawah:

Header yang kita gunakan yaitu UserAccountsDrawerHeader widget dimana memiliki empat properti utama
yaitu : accountName, accountEmail, currentAccountPicture, otherAccountsPictures. current dan other picture
properties digunakan untuk menampilkan foto

4. Setelah header maka selanjutnya kita buat _drawerItem widget kode nya
seperti di bawah ini

©AIS Pemrograman Mobile 33

5. Sekarang kita beralih ke main.dart dan import nav-drawer menjadi seperti ini:

6. Jalankan atau Reload Flutter

Tugas Mandiri
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
...............

©AIS Pemrograman Mobile 34