Flutter

Lalu Izaq Nune Indraswari, S.Kom

 Introduction Road Map

StatelessWidged
AppBar
& Scaffold

Agenda
Body

Flutter Dasar
Introduction

Presentation Title 3
 Flutter
Apa itu Flutter, dan apa bedanya dengan UI toolkit yang lain? Untuk
menjadi pengembang aplikasi Flutter, Anda hanya perlu mengingat ini:
Flutter dibuat agar berfungsi untuk perangkat apa pun dengan layar dan
berfungsi dengan:
· iOS dan Android
· Web dan Desktop (Mac, Windows, dan Ubuntu) — Bahkan mendukung
PWA

Presentation Title
 Memasang Project Flutter
Mari kita mulai tutorial Flutter ini dengan beberapa langkah di sini:
Membuka konsole/terminal (CMD) di komputer
ketikkan perintah ini dan jalankan.
flutter create <app_name>

Presentation Title
 Widget
Widget dibagi dalam 2 jenis: stateless dan stateful
Stateless Widget adalah widget yang statusnya tidak berubah seperti tombol atau
gambar. Seperti namanya, statusnya tidak berubah saat tindakan dilakukan di layar.
Saat widget perlu menahan beberapa status seperti halaman saat ini di Page View, tab
yang saat ini dipilih di sebuah Bottom Navigation Bar, Widget stateful adalah pilihan
yang tepat untuk dibuat.
StatefulWidgets dapat menahan status Widget saat ini. Daripada menggunakan widget
utnuk membangun method, Stateful Widget memiliki state untuk build metode yang
terpanggil setiap kali kita secara eksplisit memanggil setState.
Dan Demikian pula, lihat dokumentasi (ada video di dalamnya) untuk widget stateful di
sini:
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

Presentation Title
ANNUAL
REVENUE
Roudmap
GROWTH Mobile Lanjut
Flutter Roadmap
15 Route &
Navigasi

16 Input Control
Extract
Layout 14
Widget &
Row Class
13
Column
Widget Latihan
AppBar() 12 Body
11 Title() Container()
Actions()

11 11 12 13 14 15 16

2022 2022 2022 2022

StatelessWidged & Scaffold

StatelessWidget : Ibarat sebuah Bingkai Papan Lukisan Yang Belum

diberikan Papan Lukisan

Scaffold : Ibarat Sebuah Papan Lukisan Yang Belum Diberikan

Coretan
StatelessWidget
AppBar()
Title & Actions
Body
Layout
Layout->Column
Layout->Row
Latihan Layout Column & Row
 Extract Widget

Tekan di Keyboard: ( Ctrl + titik )

Klik kanan pada icon lampu kuning

Mobile Dasar Flutter ( Izaq Qiuqiu)

 Split Class
Membuat folder presentation & widgets

Dalam folder presentation

Buatlah folder dashboard & Home

Buatlah file home.dart didalam folder Home

Buatlah file icon_with_label.dart didalam folder Home

Mobile Dasar Flutter ( Izaq Qiuqiu)

 Split Class

main.dart

home.dart

Icon_with_label.dart

Mobile Dasar (Izaq Qiuqiu)

 Input Control
INPUNT CONTROL

Sebuah fitur digunakan sebagai pengolah masuknya data pada pada user beberapa input control yang ada dalam
Bahasa Pemrograman pada umumnya yaitu:

1. Button
2. Textfield
a. Texfield General
b. Texfield Password
c. Textfield Number
d. Textfield Email
e. dll
3. Radio Button
4. Checkbox
5. dll
Untuk membuat input control kita harus menggunakan terlebih dahulu fitur Container()

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 Button Without Icon

Batas vertical antara AppBar dengan Button 10 Pixel

Untuk versi fluttedr 2 menggunakan RaisedButton

Sedangkan versi flutter ver 3 menggunakan Elevated Button

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 Button With Icon Batas vertical antara AppBar dengan Button 10 Pixel

Untuk versi fluttedr 2 menggunakan RaisedButton

Sedangkan versi flutter ver 3 menggunakan Elevated Button

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 TextField
Batas vertical antara AppBar dengan Button 10 Pixel

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 Latihan Textfield,
RadioButton, Checkbox

Buatlah Input Control Seperti Biiodata

Terdiri dari
TEXTFIELD
Username :
Nama Lengkap :
Alamat :
No. Hp :
RADIO BUTTON:
Jenis Kelamin: Lakilaki & Perempuan
TEXTFIELD PASSWORD:

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

Route & Navigasi