What is Flutter?

Flutter adalah SDK (Software Development Kit) open-source yang

dibuat oleh Google untuk pengembangan aplikasi cross-platform.
Dengan Flutter, pengembang dapat menulis kode sumber tunggal
dalam bahasa pemrograman Dart untuk membuat aplikasi yang
berjalan secara native baik pada platform Android maupun iOS.
Flutter dikenal dengan kemampuan untuk membuat UI yang
menarik dan kinerja yang hampir sama dengan aplikasi native,
serta pengembangan yang cepat melalui fitur hot reload yang
memungkinkan perubahan kode langsung terlihat tanpa perlu
restart aplikasi.
Benefits of Flutter

Cross-Platform Single Native Fast

Codebase Performance Development
Why Flutter?

Flutter and React Native communication channels and community size

comparison (2023)

Results for “Most Loved Technology – Other Frameworks and Libraries” category in the Stack
Overflow Survey (2022)
Who is Using Flutter?
Local Companies
Setup & Installation
Setup & Installation
1. Flutter SDK : https://docs.flutter.dev/get-started/install
2. Xcode (MacOS)
3. Android Studio (IDE) : https://developer.android.com/studio/install
4. VS Code (Text Editor) : https://code.visualstudio.com/download

VS Code Extension
1. Flutter
2. Dart
3. Pubspec Assist
4. Error Lens
5. Awesome Flutter Snippets (Optional)
6. Flutter Snippets (Optional)
7. Flutter Widget Snippets (Optional)
8. Bracket Pair Colorizer (Optional)
9. Prettier – Code Formatter (Optional)
Create First App
Create First App (VS Code)
1. Press F1 or Ctrl+Shift+P or Cmd+Shift+P (MacOS)
2. Type Flutter: New Project, then select.

3. Select Application

4. Choose the folder location

5. Type your app name (example: my_first_flutter_app), then Enter.

6. Done
Create First App (Command Line)

1. Go to your folder location path (example: cd your/directory/flutter_projects)

in your cmd/Terminal/Windows PowerShell or just go to your folder location
path with Windows Explorer then press Shift+Right Click then click Open
PowerShell (Windows)
2. Then type “flutter create --org com.developerName my_first_flutter_app”
3. Then type “cd my_first_flutter_app”
4. And type “code .” to open the project in VS Code
5. Done
Run First App

1. Open Android Studio

2. Create AVD (Android Virtual Device)/Emulator in Android Studio
3. Run the AVD/Emulator
4. Then press F5 (Run with Debugging) or Ctrl+F5 (Run without Debugging)
Dart Introduction
What is Dart?

• Dikembangkan oleh Google dan diluncurkan pada konferensi

GOTO di Aarhus, Denmark, Oktober 2011
• Dart adalah bahasa Pemrograman Berorientasi Objek (OOP)
• Berguna untuk mengembangkan aplikasi seluler, web, dan server
• Mirip dengan bahasa OOP lainnya, bahasa ini mendukung kelas,
objek dan metode
• Versi pertama Dart 1.0 dirilis pada tanggal 14 November 2013
• Versi terbaru Dart 3.1 dirilis pada 16 Agustus 2023
Concepts

• Semuanya adalah objek

• Bahkan bilangan/angka, Boolean, fungsi, dan null adalah objek
• Setiap objek adalah sebuah instance dari sebuah kelas yang mewarisi dari objek
• Berbeda dengan Java, dart tidak mendukung kata kunci public, private dan protected
• Jika sebuah pengenal dimulai dengan underscore (_), maka pengenal tersebut bersifat private
Dart Environment

Dart Editor
• Dart Editor: teks editor seperti vscode, sublime text,
notepad++ dll.
Dartium • Dartium: peramban web yang menyertakan Dart
(berdasarkan Chromium)
Dart Tools
• dart2js: digunakan untuk mengonversi skrip dart ke
dart2js javascript
• pub: a package manager
pub
Dart Program

• main(): fungsi tingkat atas yang khusus, wajib, di mana

eksekusi aplikasi akan dimulai pertama kali
• Setiap aplikasi harus memiliki fungsi main() tingkat
atas, yang berfungsi sebagai titik masuk ke aplikasi.
Comments

Dart mendukung komentar satu baris dan beberapa baris

Variables

• Variabel dideklarasikan menggunakan kata kunci var

yang mirip dengan JavaScript
• Variabel adalah referensi dan variabel yang tidak
diinisialisasi memiliki nilai awal null
Built in Types
• Int • List (Arrays)

• Double
• Map

• String

• Queue
• Boolean

• Set
String Interpolation
• Dapat ditambahkan dalam sebuah literal string dengan
menambahkan $ (contoh: $variable_name or ${objectUser.name}

•
Control Flow Statements
• if, else if and else
• for loops (for and for in)
• while and do while loops
• switch and case
Class
• Dart adalah bahasa berorientasi objek dengan class
• Setiap objek adalah contoh dari sebuah class

Class Constructor
Metode khusus dari suatu class yang digunakan untuk inisialisasi
objek. Saat kita membuat instance (objek) dari sebuah class,
constructor akan dipanggil dan seringkali digunakan untuk
memberikan nilai awal pada atribut-atribut objek
 Single
Inheritance
Flutter Widgets
Flutter Widgets
Flutter Structure
Material App

Title Home

Scaffold

AppBar Body FloatingActionButton

Title Container Widget

Text Column/Row

Widget

Widget
 Scaffold Widget

• Scaffold merupakan kerangka dasar yang mengimplementasi struktur tata letak visual material design.
Biasanya, scaffold digunakan sebagai root dari halaman yang akan ditampilkan.
• Fitur utama dari Scaffold yaitu AppBar, Body, FloatingActionButton, Drawer & BottomNavigationBar
 Text Widgets

• Text

• RichText
TextField Widget

TextField: widget yang memungkinkan user untuk meng-input teks, biasanya digunakan dalam form
ataupun tempat yang memerlukan input teks. TextField dapat dikonfigurasi untuk berbagai jenis input
seperti teks, password, nomor dan lainnya.
 Image Widgets

• Asset Image

• Network Image
Container and SizedBox Widget
• Container: adalah widget serbaguna yang menggabungkan widget painting, positioning, dan size yang
umum. Container dapat didekorasi dengan BoxDecoration dan juga menambahkan constraints pada child
widget, padding, dan margins. Pada dasarnya, container adalah widget yang serbaguna untuk
menggabungkan berbagai fungsi menjadi satu.

• SizedBox: adalah widget sederhana dengan ukuran (height & width) tertentu, dapat digunakan ketika Anda
ingin membuat spasi antar widget (spacer) atau ingin menentukan ukuran tertentu pada child widget.
 Button Widgets
• TextButton: Button yang umumnya digunakan untuk teks

• OutlinedButton: Button dengan border, merupakan varian dari TextButton

• ElevatedButton: Button dengan elevasi dan efek saat ditekan

• ElevatedButton.icon: Button dengan icon, elevasi dan efek saat ditekan

• IconButton: Button dengan ikon

• FloatingActionButton:
InkWell and GestureDetector Widget

InkWell dan GestureDetector merupakan widget pada flutter, yang

dapat memberikan respon pada aksi sentuhan yang dilakukan oleh user
yang meliputi aksi klik pada widget. Keduanya memiliki atribut on tap,
double tap, long press, dll.
Column and Row Widget
• Column: View Widget yang dapat menampung berbagai widget didalamnya dan menampilkan view secara
kolom dari atas ke bawah.

• Row: View Widget yang dapat menampung berbagai widget didalamnya dan menampilkan view secara baris
dari kiri ke kanan.
ListView and GridView Widget
• ListView: widget yang menampilkan
view scrollable baik secara vertical
ataupun horizontal. Sangat efektif
untuk menampilkan data dengan
jumlah yang besar.

• GridView: widget yang menampilkan

view scrollable dalam bentuk kotak
atau grid seperti galeri. Juga efektif
untuk menampilkan data dengan
jumlah yang besar.

ListView GridView
UI Challenge (Login UI)
Slicing UI
Review
Slicing UI
State Management & Navigation
dengan
State Management

State Management merupakan cara pengelolaan dan penanganan data yang

dibutuhkan untuk membangun UI yang dinamis yang reaktif berdasarkan
interaksi pengguna ataupun data dari sumber external.

State Management juga menyangkut bagaimana data disimpan, diakses dan

diperbarui sepanjang life-cycle aplikasi, untuk memungkinkan UI yang dinamis
dan reaktif.
State Management (GetX)
Untuk menggunakan GetX sebagai state management, ikuti panduan berikut:

1. Kunjungi https://pub.dev/packages/get untuk melihat dokumentasi dari GetX (Version, Installing,

Example)
2. Tambahkan dependency GetX ke pubspec.yaml

3. Kemudian Save file pubspec.yaml atau jalankan command flutter pub get untuk mengunduh
dependency ke project
State Management (GetX)

GetX menggunakan pendekatan design pattern Model-View-Controller

(MVC) yang merupakan pendekatan dalam pengembangan perangkat lunak
untuk memisahkan aplikasi menjadi 3 komponen utama, yaitu: Model (Data
Structure), View (UI) dan Controller (Business Logic).

1. Model: mewakili struktur data pada aplikasi

2. View: menampilkan data kepada pengguna (GetBuilder, Obx(), GetX)
3. Controller: class yang mengextends GetXController yang akan
mengelola state dan berisi logika untuk berkomunikasi dengan model
State Management (GetX)
Contoh sederhana menggunakan GetX untuk state management, yang pertama kali
harus dilakukan adalah merubah MaterialApp menjadi GetMaterialApp

• Buat User model

• Buat controller dengan nama UserController

State Management (GetX)
• Buat View untuk menampilkan data user
Navigation (GetX)
Untuk melakukan navigasi dari halaman ke halaman yang lain dengan menggunakan
GetX kita perlu mendefinisikan rute /route terlebih dahulu dan kemudian melakukan
navigasi dengan menggunakan nama route yang sudah didefinisikan

Definisikan route pada GetMaterialApp:

Navigation (GetX)
Kemudian lakukan navigasi antar halaman dengan menggunakan nama route yang
didefinisikan, dengan langkah:

Untuk navigasi ke rute sebelumnya (Home Page)

Untuk navigasi kembali ke Home dan menghapus semua rute sebelumnya

Navigation (GetX)
Melakukan navigasi sekaligus mengirim data dalam bentuk arguments

Menerima dan mengolah data yang dikirim dari HomePage ke SecondPage

API Integration &
Networking
API Integratrion & Networking (Dio)
Dio merupakan dependency HTTP client untuk Flutter dan Dart untuk melakukan
operasi jaringan seperti HTTP requests. Seringkali aplikasi kita membutuhkan data yang
bersumber dari pihak luar dengan cara consume API, dan Dio menyediakan cara yang
mudah dan efisien untuk mengakses API tersebut. Beberapa fitur canggih dari dio
dibandingkan dengan dependency http biasa:

1. Interceptor
2. FormData
3. Request Cancellation
4. Timeouts
5. Global Configuration

Dengan fitur-fitur tersebut, memberikan pengembang kontrol lebih terhadap

permintaan jaringan dan memudahkan penanganan skenario jaringan yang kompleks.
API Integration & Networking (Dio)
Untuk menggunakan dio untuk kebutuhan networking, ikuti panduan berikut:

1. Kunjungi https://pub.dev/packages/dio untuk melihat dokumentasi dari Dio (Version, Installing,

Example)
2. Tambahkan dependency Dio ke pubspec.yaml

3. Kemudian Save file pubspec.yaml atau jalankan command flutter pub get untuk mengunduh
dependency ke project
API Integration & Networking (Dio)
1. Buat DioService class, dan setup Dio instance pada class

2. Lakukan dependency injection pada class DioService dengan GetX

API Integration & Networking (Dio)
Mengambil instance dari class DioService, lalu gunakan fungsi sesuai kebutuhan (GET,
POST, PUT, DELETE, dll)

Berikut implementasinya pada UserController

MINI PROJECT
Mini Project (Todos App)