Ringkasan dokumen tersebut adalah: (1) Dokumen tersebut membahas dasar-dasar pemrograman mobile menggunakan Flutter, (2) Materi yang dibahas antara lain cara kerja aplikasi Flutter, penggunaan widget, dan stateless dan stateful widget, (3) Dokumen juga membahas konsep-konsep dasar Dart seperti tipe data, function, dan class."

1. TEKNIK INFORMATIKA
UNISNU JEPARA
Pemrograman Mobile
Unit 2: Dasar-dasar Flutter
Akhmad Khanif Zyen

2. TEKNIK INFORMATIKA
UNISNU JEPARA
Materi
● Cara kerja Flutter app
● Bekerja dengan Widget dan membuat Custom Widget
● Membuat reaksi terhadap user events
● Stateless dan stateful widget
● Dart Fundamental

3. TEKNIK INFORMATIKA
UNISNU JEPARA
Dart basics
● Dart playground: https://dartpad.dartlang.org
● Kode dart awal yang akan dieksekusi adalah main()
● Naming conventions:
Naming conventions Penggunaan Contoh
PascalCase Nama Class UserAccount{}
camelCase Nama variabel, property,
method, function
addUser(), updateUser(),
name, age
UPPERCASE Nama Constant ACTIVE, MALE, FEMALE

4. TEKNIK INFORMATIKA
UNISNU JEPARA
Dart basics
● Strong typed language: penggunaan class, method, function, variabel
disarankan harus jelas tipe datanya, walau dart juga mendukung
penggunaan keyword var
1. Sebaiknya function memiliki tipe data, atau jika tetap
tidak memiliki tipe data, maka tambahkan void
2. Isi function sebaiknya tetap berupa return
3. Pemanggilan function, sebaiknya ditampung dalam
variabel

5. TEKNIK INFORMATIKA
UNISNU JEPARA
Dart basics
● Type inferred: penggunaan var pada variabel dibolehkan asal pada sisi
sebelah kanan sudah jelas tipe datanya.
1. Function memiliki tipe data
2. Function memiliki keyword return dibaris
terakhir
3. Pemanggilan function ditampung dalam
variabel
4. Penggunaan var untuk type inferred, lebih
baik disarankan langsung menggunakan
tipe data
double firstResult = addNumbers(1,2.6)
5. Pemanggilan function disertai dengan
parameter/argumen yang dibutuhkan,
disini argumen harus ditulis berurutan,
dinamakan positional argument

6. TEKNIK INFORMATIKA
UNISNU JEPARA
● Semua di dart adalah object
● Konsep object di dart dibuat menyerupai object di dunia nyata.
● Contoh object nyata: Mobil, bisa dikendarai, terdiri dari beberapa tempat
duduk, memiliki kemampuan horsepower dll
● Contoh object dart: Button, bisa ditekan/pressed, memiliki warna
background, memiliki text, dll
● Object berkaitan dengan struktur data, mengelompokkan data yang
berkaitan sehingga membentuk sebuah object.
Dart basics

7. TEKNIK INFORMATIKA
UNISNU JEPARA
Dart basics
1. Penggunaan variabel name dan age, tidak efisien
karena harus membuat dua variabel
2. Dikelompokkan sendiri menjadi sebuah object
3. Variable di dalam class biasa disebut property
4. Setiap instance object memiliki scopenya
masing-masing

8. TEKNIK INFORMATIKA
UNISNU JEPARA
Membangun Aplikasi Flutter dari Nol
● Pada main.dart hapus semua isinya, sisakan fungsi main()
● Pada main() isikan fungsi runApp(MyApp());, akan muncul autocomplete
dan otomatis akan menambahkan import package material.dart
● runApp() berfungsi untuk memanggil widget utama, dan mengeksekusi
fungsi build() pada widget tersebut
● MyApp() berwarna merah karena belum ada class tersebut, buatlah
terlebih dahulu

9. TEKNIK INFORMATIKA
UNISNU JEPARA
Membangun Aplikasi Flutter dari Nol
● Class MyApp meng-extend StatelessWidget
karena fungsi build() terletak salah satunya di
StatelessWidget
● Buatlah sebuah method build() dengan tipe
Widget, dengan satu argumen context bertipe
BuildContext
● Karena build() asalnya berasal dari class
StatelessWidget, maka perlu ditambahkan
annotation @override
● Annotation tidak wajib, tetapi akan membantu
kode kita menjadi lebih jelas

10. TEKNIK INFORMATIKA
UNISNU JEPARA
Membangun Aplikasi Flutter dari Nol
● Widget UI induk di flutter biasanya menggunakan MaterialApp, dan
MaterialApp memiliki named argumen home, isikan dengan Text(“Hello”);
● Simpan dan Jalankan

11. TEKNIK INFORMATIKA
UNISNU JEPARA
Class Constructor dan Named Argument
● Function di dalam class disebut dengan
method
● Constructor adalah method yang akan
dijalankan pertama kali ketika ada inisiasi
object dari class
● Biasanya digunakan untuk mengisi property
pertama kali.
● Pembuatannya dengan membuat method
sesuai nama class, dan menambahkan
parameter sesuai property yang didaftarkan

12. TEKNIK INFORMATIKA
UNISNU JEPARA
● Penulisan Constructor bisa tidak
memiliki body,
dengan menggunakan property sebagai
argumen
● Argument pada method, bisa digunakan
dengan menggunakan tanda kurung
kurawal agar menjadi named argument
● Sehingga ketika pada pemanggilan
method/constructor harus menyertakan
named argument-nya
Class Constructor dan Named Argument

13. TEKNIK INFORMATIKA
UNISNU JEPARA
Class Constructor dan Named Argument
● Penambahan annotation @required pada
argumen, menjadikan argumen wajib
diisi.
● @required hanya dikenali di Flutter, tidak
dikenali di Dart
● Pada Constructor, argumen bisa diisi
default value

14. TEKNIK INFORMATIKA
UNISNU JEPARA
Quiz
Kerjakan quiz2: Flutter App Basic

15. TEKNIK INFORMATIKA
UNISNU JEPARA
Building widget tree
● Tulisan Hello berlatar hitam dan berwarna merah dan bergaris kuning
karena langsung tanpa menggunakan style
● Terdapat widget Scaffold sebagai elemen dasar untuk membentuk
sebuah halaman app
● Scaffold memiliki banyak konfigurasi /argumen misal appBar dan body
● Argumen appBar diisi dengan widget AppBar
● AppBar memilki argumen title isi dengan widget Text(“My First App”),
● Argumen body pada Scaffold isi dengan widget Text(“This is my first
text”),

16. TEKNIK INFORMATIKA
UNISNU JEPARA
Building widget tree

17. TEKNIK INFORMATIKA
UNISNU JEPARA
Jenis widget
Output & Input (visible)
RaisedButton(), Card(), Text() ...
Digambar di layar, apa yang
user lihat
Layout & Control (invisible)
Row(), Column(), ListView() ...
Memberi app bentuk struktur
dan mengontrol bagaimana
visible widget digambar di
layar (tidak langsung terlihat)

18. TEKNIK INFORMATIKA
UNISNU JEPARA
Jenis widget
Output & Input (visible)
RaisedButton(), Card(), Text() ...
Digambar di layar, apa yang
user lihat
Layout & Control (invisible)
Row(), Column(), ListView() ...
Memberi app bentuk struktur
dan mengontrol bagaimana
visible widget digambar di
layar (tidak langsung terlihat)
Container()

19. TEKNIK INFORMATIKA
UNISNU JEPARA
Menambah Layout Widget
● Desain layout quiz:
● Beberapa widget disusun secara
vertical, maka untuk widget layout
cocok menggunakan Column()
● Column menerima named argumen
children yang bertipe widget, dan bisa
menampung banyak widget

20. TEKNIK INFORMATIKA
UNISNU JEPARA
Menambah Layout Widget

21. TEKNIK INFORMATIKA
UNISNU JEPARA
Quiz
Kerjakan quiz3: Widget Basics

22. TEKNIK INFORMATIKA
UNISNU JEPARA
Menghubungkan function ke Button
● Dengan membuat sebuah fungsi di dalam class yang sama
● Untuk saat ini hanya mencetak Answer Chosen!
● Di dalam argumen onPressed diisi dengan function tanpa ().
● Jika dengan () maka kode akan dijalankan meskipun Button belum
ditekan
● Dengan tanpa () maka function dianggap sebagai reference karena
function akan dieksekusi ketika Button ditekan.

23. TEKNIK INFORMATIKA
UNISNU JEPARA

24. TEKNIK INFORMATIKA
UNISNU JEPARA
Fat Arrow Function
● Untuk sebuah function di flutter yang hanya memiliki single line body (1
expression) maka bisa menggunakan tanda => sebagai pengganti kurung
kurawal
● Jika ada return, wajib menghapus kata return -nya

25. TEKNIK INFORMATIKA
UNISNU JEPARA
Fat Arrow Function dan Anonymous Function
● Anonymous Function digunakan ketika ada sebuah function yang hanya
dipakai di satu tempat saja, maka tidak perlu dipisah menjadi sebuah
function sendiri, tetapi embeded ke pemanggil.
● Anonymous Function bs digabung dengan Fat Arrow Function

26. TEKNIK INFORMATIKA
UNISNU JEPARA
Updating Widget Data
● Daftar pernyataan ditampung dalam List, dan pertanyaan ditampilkan
discreen mengambil dari List, dengan mengakses indexnya

27. TEKNIK INFORMATIKA
UNISNU JEPARA
Updating Widget Data
● Diperlukan default value untuk index ke 0
● Dan ketika tombol Answer ditap, maka lanjut
pertanyaan di index berikutnya yaitu 1 dan
seterusnya. Dengan mengganti isi dari fungsi
answerQuestion menjadi questionIndex =
questionIndex + 1;
● Print untuk mengecek index yang aktif

28. TEKNIK INFORMATIKA
UNISNU JEPARA
● Terlihat di log, data sudah berhasil diupdate tetapi tidak mengupdate di
screen. Untuk setiap data yang berubah di internal class tersebut cara
yang benar adalah menggunakan StatefulWidget
● Pada StatefulWidget ada dua class yang terlibat yaitu class MyApp yg
meng-extend StatefulWidget dan class MyAppState yg meng-extend State
● Diperlukan mekanisme menghubungkan kedua class tersebut
Updating Widget Data

29. TEKNIK INFORMATIKA
UNISNU JEPARA
Stateless vs Stateful
Stateless Stateful
Widget
Input Data
Render UI
Widget
Render UI
Widget
Data bisa berubah
(dari external)
Di-render ulang ketika
input data berubah
Internal State
Data bisa berubah
(dari external)
Di-render ulang ketika
input data atau
internal state
berubah

30. TEKNIK INFORMATIKA
UNISNU JEPARA
Mengganti Stateless menjadi StatefulWidget
● Ubah menjadi StatefulWidget, dan langsung tutup dibawahnya kurung
kurawal
● Dan sisipkan class baru MyAppState

31. TEKNIK INFORMATIKA
UNISNU JEPARA
Mengganti Stateless menjadi StatefulWidget
● Arah kursor ke MyApp yang bergaris merah, tekan Ctrl + ., dan pilih
Create 1 missing override
● Simpan dan jalankan, lakukan hot restart
● Screen masih belum berubah

32. TEKNIK INFORMATIKA
UNISNU JEPARA
● Data/State yang berubah terletak pada fungsi answerQuestions(), lebih
tepatnya di questionIndex, maka bungkus dengan setState() dimana
menerima argumen berupa anonymous function, dan masukkan
questionIndex ke dalam body dari anonymous function
● SetState akan memberitahukan Flutter bahwa ada value/state yang
berubah dan perlu di render ulang
● Simpan dan jalankan,hot restart.
Menggunakan SetState pada data yang berubah

33. TEKNIK INFORMATIKA
UNISNU JEPARA
Quiz
Kerjakan quiz4: Stateless dan Stateful Widget

34. TEKNIK INFORMATIKA
UNISNU JEPARA
Menggunakan private property
● Dart secara eksplisit tidak memiliki visibility modifier (public, private,
protected), secara default semua dianggap public
● Untuk men-set ke private, dart menggunakan underscore _
● Ruang lingkupnya per library atau per file.
● Private property untuk memastikan property/method tidak bisa diakses
file lain

35. TEKNIK INFORMATIKA
UNISNU JEPARA
Menggunakan private property

36. TEKNIK INFORMATIKA
UNISNU JEPARA
Membuat custom widget
● Pertanyaan yang muncul pada screen, akan kita pisahkan menjadi widget
baru
● Buat file baru question.dart, gunakan autocomplete, isikan dengan
berikut

37. TEKNIK INFORMATIKA
UNISNU JEPARA
Membuat custom widget
● Masih ingat pada StatelessWidget bisa dirender ulang jika input data
(external) berubah, maka import question.dart di main.dart
● Dan pada fungsi build(), kode untuk menampilkan pertanyaan ganti
dengan berikut

38. TEKNIK INFORMATIKA
UNISNU JEPARA
Styling
margin
border
padding
Container()
child(=content)

39. TEKNIK INFORMATIKA
UNISNU JEPARA
Enum dan Named Constructor
● Pada dart, sebuah constructor bisa didefinisikan dengan named
constructor dan boleh lebih dari satu dan bisa memiliki argumen
berbeda-beda
● Contoh EdgeInsets.all() terdapat satu positional argumen,
EdgeInsets.fromLTRB() empat positional argumen , EdgeInsets.only()
empat named argument.
● Pada TextAlign.center, dinamakan enum.
● Setiap value dalam enum mewakili urutan index berupa integer
● enum Colors {
● blue,
● yellow,
● Green }

40. TEKNIK INFORMATIKA
UNISNU JEPARA
Official Docs dan Widget Catalog
https://flutter.dev/docs
https://flutter.dev/docs/development/ui/widgets

41. TEKNIK INFORMATIKA
UNISNU JEPARA
Memberikan argumen berupa Callback Function
● Memisahkan tombol answer menjadi widget
sendiri, terdapat beberapa catatan seperti
bagaimana memanggil function
questionAnswer yang ada pada main.dart,
yaitu dengan membuat pointer/reference
ke function tersebut
● Buat file answer.dart:

42. TEKNIK INFORMATIKA
UNISNU JEPARA
Memberikan argumen berupa Callback Function
● Pada main.dart, import answer.dart dan
ganti semua RaisedButton menjadi
Answer(_questionAnswer),

43. TEKNIK INFORMATIKA
UNISNU JEPARA
Perkenalan Maps
● Selama ini kita menggunakan List. Contoh misal dalam sebuah List siswa
= [‘Andi’,’Jepara’,30] dimana index 0 seharusnya merepresentasikan
nama, index ke 1 merepresentasikan alamat, dan 30 merepresentasikan
umur, maka untuk mengakses nama siswa tentunya kurang manusiawi
jika menggunakan siswa[0] dst. Untuk itulah disini digunakan Maps
● Maps merupakan pasangan key-value, sehingga untuk merepresentasikan
index/key, tidak harus berupa angka, tapi key bisa berupa string, sehingga
jadilah seperti siswa = {‘nama’: ‘Andi’,‘alamat’: ‘Jepara’,’umur’:30}.
Untuk mengakses nama maka digunakan siswa[‘nama’]
● Maps juga disebuat sebagai object.
● Satu object direpresentasikan sepasang kurung kurawal { }. Jika lebih
dari satu object, maka beberapa object harus dibungkus dalam List [ ]

44. TEKNIK INFORMATIKA
UNISNU JEPARA
Perkenalan Maps
● Kita ingin menampung baik questions maupun answers didalam satu
Maps, maka ganti menjadi berikut

45. TEKNIK INFORMATIKA
UNISNU JEPARA
Mapping Lists ke Widgets
● Pada layar untuk menampilkan
answer masih ditulis hardcoded
dengan memanggil widget
Answer() sebanyak empat kali.
● Sekarang answer akan
mengambil dinamis dari List
Object
● Pada answer.dart, ganti nilai
statis “Answer 1” menjadi
property answerText

46. TEKNIK INFORMATIKA
UNISNU JEPARA
Mapping Lists ke Widgets
● Buka main.dart, hapus semua Answer(), ganti menjadi
questions[_questionIndex][‘answers’]
● Kode diatas hanya mengambil value dari key answers. Value yang masuk
perlu dilewatkan ke Answer(). Dart tidak bisa otomatis mengenali key
answers sebagai List, sehingga perlu didaftarkan secara manual untuk
selanjutnya memanggil method map() untuk mengkonversi menjadi List
Answer()
(questions[_questionIndex][‘answers’] as List<String>).map((answer){
return Answer(_answerQuestion, answer)}).toList(),
● Karena Column harus menerima widget, sedangkan kode diatas berupa
List<Answer> maka tambahkan spread operator berupa tiga titik didepan
...(questions[_questionIndex][‘answers’] as
List<String>).map((answer){ return Answer(_answerQuestion,
answer)}).toList(),

47. TEKNIK INFORMATIKA
UNISNU JEPARA

48. TEKNIK INFORMATIKA
UNISNU JEPARA
Final vs const
● Property yang terdapat keyword final berarti ia hanya boleh diisi sekali
saja. Boleh ketika sebelum compile time, atau diisi ketika runtime. Untuk
tipe List, boleh memodifikasi isi List yang ada.
● Property yang terdapat keyword const berarti ia tidak boleh berubah, dan
sudah ditentukan isinya sebelum compile time. Untuk tipe List juga tidak
boleh memodifikasi isi List yang ada
● Untuk Map questions saat ini tidak menerima perubahan ketika runtime
maka bisa diubah menjadi const. Jika Map sebagai property sebuah class,
maka perlu ditambah keyword static const

49. TEKNIK INFORMATIKA
UNISNU JEPARA
If statements
● Pengecekan suatu kondisi jika benar kode blok mana yang akan
dieksekusi dan jika salah kode blok mana yang akan dieksekusi
● Digunakan operator pembanding, untuk mengecek kondisi
No Operator contoh Keterangan
1 < a < b Jika nilai a kurang dari b maka benar
2 <= a <= b Jika nilai a kurang dari sama dengan b maka benar
3 > a > b Jika a lebih dari b maka benar
4 >= a >= b Jika a lebih dari sama dengan b maka benar
5 == a == b Jika a sama dengan b maka benar
6 != a != b Jika a tidak sama dengan b maka benar

50. TEKNIK INFORMATIKA
UNISNU JEPARA
If statements,“null”value dan tertanary operator
● Penggunaan pembanding hanya bisa membandingkan dua nilai/keadaan.
Jika lebih dari dua, bisa digabung menggunakan logical operator and (&&)
dan or (||)
● Didalam flutter, inisiasi awal sebuah variabel tanpa memberikan nilai
akan menganggap variabel tadi bernilai null. Contoh var a;
● Null cocok digunakan dengan if statements
● Penggunaan if jika terdiri satu baris saja, maka bisa menggunakan
tertanary operator

51. TEKNIK INFORMATIKA
UNISNU JEPARA
If statements pada UI
● Ketika quiz berakhir, akan eror karena tetap melanjutkan ke index
berikutnya yang sebenarnya sudah habis
● Untuk panjang pertanyaan 3, maka index terakhir adalah 2, sehingga
diperlukan pengecekan “jika index kurang dari panjang question maka
tampilkan pertanyaan, jika tidak maka tampilkan selesai/skor”
●

52. TEKNIK INFORMATIKA
UNISNU JEPARA
Memecah mecah kode
● Kode dipecah-pecah untuk mempermudah pembacaan dan untuk
performa lebih baik
● Buat file quiz.dart untuk menampung pertanyaan dan pilihan jawaban
dan result.dart untuk menampung hasil (saat ini hanya bertuliskan “Anda
telah selesai”)
● Pada main.dart, cut Column(...) dan pada quiz.dart, buat sebuah
StatelesWidget Quiz, dan pastekan Column(...) tadi untuk pengganti
Container(). Lakukan import question.dart dan answer.dart
● Pada main.dart, cut Center(...) dan pada result.dart, buat sebuah
StatelessWidget Result, dan pastekan Center() tadi untuk pengganti
Container(). Lakukan import package material

53. TEKNIK INFORMATIKA
UNISNU JEPARA
Memecah-mecah kode
● Pada main.dart, untuk fungsi _answerQuestion dan List questions tetap
berada pada main.dart, walaupun class Quiz membutuhkannya.
● Kita akan mengirimkan _questions, _answerQuestion dan _questionIndex ke
dalam Quiz, dengan cara import quiz.dart, dan panggil Quiz(questions:
_questions, answerQuestion: _answerQuestion, questionIndex:
_questionIndex)
● Karena _questions berada pada _MyAppState yang privat, maka questions
juga sebaiknya set privat dengan menambahkan underscore _
● Sekarang di dalam class Quiz, yang menerima argumen fungsi dan list
questions, maka tambahkan property final Function answerQuestion dan
final List<Map<String, Object>>uestions. Buat constructornya juga
dengan named argument. Hapus underscore karena set property
menerima dari luar.

54. TEKNIK INFORMATIKA
UNISNU JEPARA

55. TEKNIK INFORMATIKA
UNISNU JEPARA
Memecah-mecah kode
● Tambahkan decorator @required untuk menjadikan named agumen
menjadi wajib diisi
● Pada main.dart, pada tertanary operator tambahkan Result() untuk
memanggil widget Result. Jangan lupa import result.dart
● Simpan dan jalankan ulang

56. TEKNIK INFORMATIKA
UNISNU JEPARA
Menambah skor
● Pada List answers,
sekarang jadikan Map,
dengan
menambahkan skor
untuk masing-masing
answer

57. TEKNIK INFORMATIKA
UNISNU JEPARA
Menambah skor
● Pada quiz.dart, sekarang answers bukan bertipe List<String> tetapi ganti
menjadi List<Map<String, Object>>
● Karena answer sekarang menjadi Map, maka tambahkan answer[‘text’]
untuk mengambil teks answer
● Pada main.dart, _answerQuestion akan menambahkan total score, maka
tambahkan argumen int score, dan buat variabel baru var _totalScore
=0;
● Pada quiz.dart, pada return Answer, sekarang kita perlu memastikan
argumen score juga ikut terkirim, sedangkan answerQuestion masih berupa
reference, maka ganti menggunakan anonymous function, sehingga
argumen juga bisa ikut terkirim, ubah menjadi berikut
return Answer(() => answerQuestion(answer['score']), answer['text']);

58. TEKNIK INFORMATIKA
UNISNU JEPARA
Menampilkan Score (Getters dan else if)
● Pada result.dart, buat sebuah property
final int resultScore dan
constructornya
● Pada main.dart, pada Result()
tambahkan menjadi Result(_totalScore)
● Buat sebuah getter, yang me-return
sebuah String, jika benar semua maka
“lulus sempurna”, benar dua “lulus baik”,
benar satu “lulus biasa”, salah semua
”tidak lulus”
● Kemudian tampilkan score dan resultText

59. TEKNIK INFORMATIKA
UNISNU JEPARA
Menampilkan Score

60. TEKNIK INFORMATIKA
UNISNU JEPARA
Reset Quiz
● Pada result.dart, buat property final Function
resetQuiz dan tambahkan ke constructor;
● Tambahkan widget FlatButton setelah resultText, dan
argumen onPressed isi dengan reference resetQuiz
● Pada main.dart Buat sebuah fungsi _resetQuiz(), dan
men-set variabel _totalScore dan _questionIndex
menjadi 0 dan bungkus didalam setState

61. TEKNIK INFORMATIKA
UNISNU JEPARA
Reset Quiz
● Pada Result(_totalScore), tambahkan argumen kedua untuk _resetQuiz
sehingga menjadi Result(_totalScore,_resetQuiz),
● Simpan dan full restart

62. TEKNIK INFORMATIKA
UNISNU JEPARA
Kesimpulan
Dart
● Object oriented, strongly typed programming
language
● Everything is an object
● Types: String, num, int, double, List<...>
● Variables, functions, properties, methods
● Construction function & shorthand
Types of Widgets
● Stateless & Stateful
● Visible (input/output) and invisible (layout/control)
● Complex, with lots of config options (e.g
MaterialApp) and simplex (e.g Text)
Widgets
● Your App UI => Tree of widgets
● Flutter control every pixel on the screen
● Two types of widgets: Stateless and Stateful
● Widgets have build() methods which return a
Widget
Styling & Positioning
● Styling & positioning is done via code (=> in
Widget tree)
● WIdgets can work together to achive certain
look /structure