Flutter
Lalu Izaq Nune Indraswari, S.Kom

Agenda
Introduction Road Map
StatelessWidged
& Scaffold
AppBar
Body
Flutter Dasar

Introduction
3
Presentation Title

Flutter
Presentation Title
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

Memasang Project Flutter
Presentation Title
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>

Widget
Presentation Title
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

Roudmap
Mobile Lanjut
ANNUAL
REVENUE
GROWTH

Flutter Roadmap
2022
11 11
Widget
AppBar()
Title()
Actions()
11
2022
12
Body
Container()
12
2022
13 14
Layout
Row
Column
Latihan
13
Extract
Widget &
Class
14
2022
15 16
Route &
Navigasi
Input
Control
16
15

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
Mobile Dasar Flutter ( Izaq Qiuqiu)
Tekan di Keyboard: ( Ctrl + titik )
Klik kanan pada icon lampu kuning

Split Class
Mobile Dasar Flutter ( Izaq Qiuqiu)
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

Split Class
Mobile Dasar (Izaq Qiuqiu)
main.dart
home.dart
Icon_with_label.dart

Input Control
Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom
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()

Button Without Icon
Untuk versi fluttedr 2 menggunakan RaisedButton
Sedangkan versi flutter ver 3 menggunakan Elevated Button
Batas vertical antara AppBar dengan Button 10 Pixel
Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

Button With IconBatas 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