TEKNIK INFORMATIKA
UNISNU JEPARA
Pemrograman Mobile
Unit 2: Dasar-dasar Flutter
Akhmad Khanif Zyen
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
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
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
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
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
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
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
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
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
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
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
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Quiz
Kerjakan quiz2: Flutter App Basic
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”),
TEKNIK INFORMATIKA
UNISNU JEPARA
Building widget tree
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)
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()
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Menambah Layout Widget
TEKNIK INFORMATIKA
UNISNU JEPARA
Quiz
Kerjakan quiz3: Widget Basics
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.
TEKNIK INFORMATIKA
UNISNU JEPARA
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
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Updating Widget Data
● Daftar pernyataan ditampung dalam List, dan pertanyaan ditampilkan
discreen mengambil dari List, dengan mengakses indexnya
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
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
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Mengganti Stateless menjadi StatefulWidget
● Ubah menjadi StatefulWidget, dan langsung tutup dibawahnya kurung
kurawal
● Dan sisipkan class baru MyAppState
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
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Quiz
Kerjakan quiz4: Stateless dan Stateful Widget
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Menggunakan private property
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
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Styling
margin
border
padding
Container()
child(=content)
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 }
TEKNIK INFORMATIKA
UNISNU JEPARA
Official Docs dan Widget Catalog
https://flutter.dev/docs
https://flutter.dev/docs/development/ui/widgets
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:
TEKNIK INFORMATIKA
UNISNU JEPARA
Memberikan argumen berupa Callback Function
● Pada main.dart, import answer.dart dan
ganti semua RaisedButton menjadi
Answer(_questionAnswer),
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 [ ]
TEKNIK INFORMATIKA
UNISNU JEPARA
Perkenalan Maps
● Kita ingin menampung baik questions maupun answers didalam satu
Maps, maka ganti menjadi berikut
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
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(),
TEKNIK INFORMATIKA
UNISNU JEPARA
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
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
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
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”
●
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
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.
TEKNIK INFORMATIKA
UNISNU JEPARA
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Menambah skor
● Pada List answers,
sekarang jadikan Map,
dengan
menambahkan skor
untuk masing-masing
answer
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']);
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Menampilkan Score
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
TEKNIK INFORMATIKA
UNISNU JEPARA
Reset Quiz
● Pada Result(_totalScore), tambahkan argumen kedua untuk _resetQuiz
sehingga menjadi Result(_totalScore,_resetQuiz),
● Simpan dan full restart
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

Pemrograman Mobile Unit 2 : Dasar-dasar Flutter

  • 1.
    TEKNIK INFORMATIKA UNISNU JEPARA PemrogramanMobile 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 Dartbasics ● 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 Dartbasics ● 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 Dartbasics ● 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 Dartbasics 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 MembangunAplikasi 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 MembangunAplikasi 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 MembangunAplikasi 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 ClassConstructor 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 ClassConstructor 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.
  • 15.
    TEKNIK INFORMATIKA UNISNU JEPARA Buildingwidget 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.
  • 17.
    TEKNIK INFORMATIKA UNISNU JEPARA Jeniswidget 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 Jeniswidget 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 MenambahLayout 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.
  • 21.
  • 22.
    TEKNIK INFORMATIKA UNISNU JEPARA Menghubungkanfunction 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.
  • 24.
    TEKNIK INFORMATIKA UNISNU JEPARA FatArrow 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 FatArrow 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 UpdatingWidget Data ● Daftar pernyataan ditampung dalam List, dan pertanyaan ditampilkan discreen mengambil dari List, dengan mengakses indexnya
  • 27.
    TEKNIK INFORMATIKA UNISNU JEPARA UpdatingWidget 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 Statelessvs 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 MenggantiStateless menjadi StatefulWidget ● Ubah menjadi StatefulWidget, dan langsung tutup dibawahnya kurung kurawal ● Dan sisipkan class baru MyAppState
  • 31.
    TEKNIK INFORMATIKA UNISNU JEPARA MenggantiStateless 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 Kerjakanquiz4: Stateless dan Stateful Widget
  • 34.
    TEKNIK INFORMATIKA UNISNU JEPARA Menggunakanprivate 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.
  • 36.
    TEKNIK INFORMATIKA UNISNU JEPARA Membuatcustom 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 Membuatcustom 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.
  • 39.
    TEKNIK INFORMATIKA UNISNU JEPARA Enumdan 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 OfficialDocs dan Widget Catalog https://flutter.dev/docs https://flutter.dev/docs/development/ui/widgets
  • 41.
    TEKNIK INFORMATIKA UNISNU JEPARA Memberikanargumen 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 Memberikanargumen berupa Callback Function ● Pada main.dart, import answer.dart dan ganti semua RaisedButton menjadi Answer(_questionAnswer),
  • 43.
    TEKNIK INFORMATIKA UNISNU JEPARA PerkenalanMaps ● 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 PerkenalanMaps ● Kita ingin menampung baik questions maupun answers didalam satu Maps, maka ganti menjadi berikut
  • 45.
    TEKNIK INFORMATIKA UNISNU JEPARA MappingLists 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 MappingLists 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.
  • 48.
    TEKNIK INFORMATIKA UNISNU JEPARA Finalvs 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 Ifstatements ● 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 Ifstatements,“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 Ifstatements 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 Memecahmecah 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-mecahkode ● 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.
  • 55.
    TEKNIK INFORMATIKA UNISNU JEPARA Memecah-mecahkode ● 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 Menambahskor ● Pada List answers, sekarang jadikan Map, dengan menambahkan skor untuk masing-masing answer
  • 57.
    TEKNIK INFORMATIKA UNISNU JEPARA Menambahskor ● 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 MenampilkanScore (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.
  • 60.
    TEKNIK INFORMATIKA UNISNU JEPARA ResetQuiz ● 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 ResetQuiz ● 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