Pemrograman Mobile

Akhmad Khanif Zyen

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 CPMK
• Mahasiswa mampu melakukan instalasi dan menjelaskan struktur file dan widget
• Mahasiswa mampu menulis kode program widget berikut dengan baik:
• MaterialApp, Scaffold, AppBar, Drawer, BottomNavigationBar, floatingActionButton
• Container, Text, Network Image, Asset Image,
• ListView, GridView, Row, Column, Expanded, Flexible,
• Stack, Align, Positioned, Aspect Ratio, Card, Wrap,
• Stateful, BottomNavigationBar, Page Navigation, Transition,
• Named Route & Pass Argument, Route Replacement & Clear Route Stack
• AppBar, SliverAppBar, TabBar, TabView, Drawer, DrawerHeader,
• ElevatedButton, TextButton, OutlinedButton, FloatingActionButton,
• TextField, DateTime, DateFormat, Dropdown, Checkbox, Radio, Switch
• Form Validation, Dialog, BottomSheets

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Pertemuan 1

• Sub CPMK :
• Mahasiswa mampu melakukan instalasi dan menjelaskan struktur file dan
widget
• Prasyarat:
• Mengetahui dasar pemrograman dart
• Mengetahui dasar OOP
• Bahan Kajian
• Perkenalan, Instalasi SDK, Emulator, dan Editor
• MaterialApp, Scaffold, AppBar, BottomNavigationBar,
• Drawer, floatingActionButton
• Container, Text, Image Asset, Network Image

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Pendahuluan dan instalasi

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Mind Map

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Pendahuluan

• Flutter adalah framework yang dibuat dari bahasa pemrograman

Dart, dikembangkan oleh Google, untuk membangun aplikasi
berbasis UI untuk mobile, web, dan desktop
• Waktu development yang lebih cepat dengan fitur hot reload
• UI yang disusun dari widget-widget
• Performa yang mendekati native.

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Persyaratan
sistem/hardware

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Instalasi Android/Flutter
SDK
• Sistem Operasi: Windows, Mac, Linux
• Git: untuk instalasi melalui command git clone atau untuk menjalankan
flutter upgrade (https://git-scm.com/downloads)
• Android studio : hanya dipakai android SDKnya saja
(https://developer.android.com/studio) lakukan instalasi wizard android
SDK, kemudian masuk ke SDK Manager > SDK Tools > centang Show
Package Detail > centang Android sdk command line tools latest, klik
Apply untuk instal.
• Flutter SDK: (https://docs.flutter.dev/get-started/install ), download dan
ekstrak biasa misal di C:\, kemudian tambahkan environment variable
untuk flutter binary, misal berlokasi di C:\flutter\bin
• Tambahkan environment variabel untuk platform-tools dari Android SDK,
misal berlokasi di C:\Users\khanif\AppData\Local\Android\Sdk\platform-
tools
• Jalankan flutter doctor untuk memeriksa apakah sistem kita sudah
memenuhi syarat.

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Emulator/devices

• Anda bisa menggunakan emulator jika RAM anda minimal 8G

• Anda bisa menambahkan emulator melalui android studio, masuk
ke AVD Manager, klik Create Virtual Device, kemudian pilih
hardware profile (misal Pixel 2), kemudian pilih system image (misal
Pie dan pastikan memiliki google play), kemudian klik Finish
• Untuk RAM dibawah 8GB atau demi kenyamanan, anda bisa
menggunakan device langsung dari smartphone android yang anda
miliki dihubungkan ke USB.
• Aktifkan terlebih dahulu mode USB Debugging pada perangkat
android anda dan mode USB pastikan pada mode transfer file
• Jalankan perintah flutter devices untuk melihat device yang bisa
digunakan untuk development
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Instalasi IDE

• Visual Studio Code: (https://code.visualstudio.com/download),

download dan instal, kemudian install extensions flutter, bracket
pair colorizer 2, pubspec assist, material icon theme, prettier
• Create project melalui menu View > Command Pallete > ketik
Flutter New Project > pilih Application > pilih lokasi folder >
masukkan nama project misal my_project_nim. Tunggu hingga
proses building pertama kali selesai.
• Untuk run project, anda bisa memlih device yang tersedia terlebih
dahulu, dan jika device tersebut adalah emulator pastikan running
terlebih dahulu.
• Klik Run > Run without debugging, tunggu hingga tampilan aplikasi
counter berjalan pada emulator/device fisik.
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Upgrade Flutter

• sangat disarankan anda menggunakan channel beta, caranya

dengan menjalankan perintah flutter channel beta
• Lakukan upgrade dengan perintah flutter upgrade
• Tunggu hingga proses upgrade selesai.
• Baiknya anda rutin menjalankan perintah flutter upgrade satu
bulan sekali untuk memperbarui flutter SDK yang ada di komputer
anda.

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Basic Widget

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Tipe widget

• Seluruh tampilan UI dalam flutter disusun dari widget-widget.

• Widget dalam Flutter terdiri dari 2 jenis yaitu Stateless Widget dan
Stateful Widget
• Stateless widget merupakan widget yang statis dimana tidak ada
perubahan nilai/value dalam satu layar.
• Stateful widget merupakan widget yang mana dalam satu layar ada
minimal satu widget yang memiliki kemungkinan untuk perubahan
nilai. Nilai disini disebut sebagai state.
• Contoh dalam aplikasi counter terdapat value yang selalu berubah
ketika FAB ditekan. Maka dalam satu page widget sebagai
extends/turunan dari Stateful Widget.
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Widget Tree
• Sebuah halaman/page merupakan sebuah widget, dimana
didalamnya terdiri dari widget-widget

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Material

• Material design merupakan prinsip-prinsiap desain yang

dikembangkan oleh google (https://material.io/)
• Berbagai macam UI berbasis material design disediakan oleh Flutter
SDK (https://docs.flutter.dev/development/ui/widgets/material ).
• Sebelum menggunakan widget2 diatas, harus dibungkus dengan
widget MaterialApp karena memiliki property home untuk
menampung widget
• Lebih banyak digunakan untuk theming dan routing
• https://api.flutter.dev/flutter/material/MaterialApp-class.html
• https://khanifzyen.com/2021/10/17/tutorial-flutter-02-
materialapp-widget/
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Widget Scaffold

• mengimplementasikan dasar struktur visual layout dari Material

Design
• Memakan seluruh layar yang dibagi-bagi kedalam beberapa widget
• Widget2 didalamnya seperti Drawer, AppBar, BottomNavigationBar,
FloatingActionButton
• Scaffold memiliki property body yang dapat diisi untuk membangun
UI, posisi tampilan terletak diantara appBar dan
bottomNavigationBar
• https://api.flutter.dev/flutter/material/Scaffold-class.html

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 main.dart

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Drawer (lanjutkan dari
project sebelumnya)

Pada Scaffold terdapat property

drawer yang dapat disi dengan widget
Drawer, biasanya sebagai menu burger
icon yang terletak pada AppBar
https://api.flutter.dev/flutter/material
/Drawer-class.html

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 AppBar (lanjutkan dari
project sebelumnya)

https://api.flutter.dev/flutter/mat
erial/AppBar-class.html

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 BottomNavigationBar
(buat project baru)

1
2

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 BottomNavigationBar

https://api.flutter.dev/flutter/materi
al/BottomNavigationBar-class.html
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 BottomNavigationBar

source code:
https://gist.github.com/khanifzyen2/e0fecef603472412a17f2f7d9aa81
77c

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 FloatingActionButton
(lanjutkan project
sebelumnya)
• merupakan ciri khas material
layout yaitu berupa button
yang tetap floating, biasanya
terletak di kanan bawah dan
berbentuk lingkaran dan
terdapat icon didalamnya.
• memiliki method yang sama
seperti button pada umumnya
yaitu onPressed

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 FloatingActionButton

source code:
https://gist.github.com/khanifzyen2/abddafd299b17e74c0ee46fc1940
fec6

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Container

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Mindmap

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Container
(buat project baru)

• container termasuk ke dalam

kelompok layout
• digunakan sebagai
pembungkus untuk widget lain
agar memiliki color, padding,
margin dan dekorasi yang lain
(box, borderRadius dll)

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Container

• jika ingin menambah

box dan memberi warna
juga, maka property
color dipindahkan
kedalam widget
BoxDecoration
• terdapat juga property
transform untuk
melakukan rotate pada
container

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Text

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Text

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Text (lanjut project
sebelumnya)

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Text
source code:
https://gist.github.com/khanifzyen2/9af1ac5d5387832961cc32a08a58
038c

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Image Asset & Network Image

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Network Image

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Network Image

Buat project baru, dengan isi

MyApp > MaterialApp > SafeArea >
Scaffold > body: Center > Container

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Property alignment

• Mulai tambahkan child dalam Container, yaitu Image.network()

• Memiliki property alignment, untuk mengatur posisi gambar

terhadap induk (contoh disini berarti Container)
• Alignment.topLeft
• Alignment.topCenter
• Alignment.topRight
• Alignment.center
• Alignment.bottomLeft
• Alignment.bottomCenter
• Alignment.bottomRight

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Property color dan
colorBlend

• Property color untuk memberi warna pada image

• Property blendMode untuk jenis campuran (blend) antara image
dan color
• BlendMode.color
• BlendMode.colorBurn
• BlendMode.colorDodge
• BlendMode.darken
• BlendMode.difference
• dan lain lain silahkan dicoba sendiri

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Property color dan
colorBlend

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Property fit

• fit untuk mengatur seberapa besar image akan

memenuhi induknya (Container)
• BoxFit.contain
• BoxFit.cover
• BoxFit.fill
• BoxFit.fitWidth
• BoxFit.fitHeight
• BoxFit.none
• BoxFit.scaleDown

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Property repeat

• repeat agar gambar muncul berulang-ulang

hingga memenuhi induknya (container)
• ImageRepeat.repeat
• ImageRepeat.repeatX
• ImageRepeat.repeatY

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Image Asset

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Image asset
• Image akan dibundling dalam package aplikasi
• Letakkan image dalam folder assets/images
• Daftarkan assets dalam file pubspec.yaml

• Panggil dengan Image.asset()

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Circular image

source code:
https://gist.github.com/khanifzyen2/0bb25bb0a34df62fd51e1bc250e3
a7d5
TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
 Circular Image dengan
ClipOval

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Circular Image dengan
ClipOval

source code:
https://gist.github.com/khanifzyen2/3e0bab
1fe7271ddec97e90a288a50649

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id

 Daftar Pustaka

[1] -, “Flutter Tutorial for Beginners #1 Intro & Setup”, Flutter, [Online]. Tersedia:
https://www.youtube.com/watch?v=dgfD3qbjf4Y [Diakses 22 Januari 2022].
[2] -, “Flutter Tutorial for Beginners #2 File Structure & Widget Introduction”,
Flutter, [Online]. Tersedia: https://www.youtube.com/watch?v=9mnHP81D6C4
[Diakses 22 Januari 2022].
[3] -, “Flutter Tutorial for Beginners #3 Container Widget & Text Widget”, Flutter,
[Online]. Tersedia: https://www.youtube.com/watch?v=Vg2zmH1G2mQ [Diakses
22 Januari 2022].
[4] -, “Flutter Tutorial for Beginners #4 Network Image & Asset Image”, Flutter,
[Online]. Tersedia: https://www.youtube.com/watch?v=azmVWauXUvc [Diakses
21 Maret 2022].

TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id