Apa itu flutter, struktur dari aplikasi flutter, setup dan instalasi, hello world

1. TEKNIK INFORMATIKA
UNISNU JEPARA
Pemrograman Mobile
Unit 1 : Perkenalan
Akhmad Khanif Zyen

2. TEKNIK INFORMATIKA
UNISNU JEPARA
Outline
● History of Mobile Programmers...
● Why flutter?
● Structure of flutter apps
● Setup and Installation
● Hello World

3. TEKNIK INFORMATIKA
UNISNU JEPARA
History of a Mobile Programmer...
● Andi seorang programmer iOS
● Ia memiliki program yang sangat
populer di app Store

4. TEKNIK INFORMATIKA
UNISNU JEPARA
History of a Mobile Programmer...
● Andi seorang programmer iOS
● Ia memiliki program yang sangat
populer di app Store
● Sebuah sosial media dimana kita
akan dipertemukan dengan
orang-orang yang memiliki
makanan favorit yang sama
● Semua orang sangat menyukai
aplikasi ini
● Hingga tiba saatnya setiap orang
bertanya….

5. TEKNIK INFORMATIKA
UNISNU JEPARA
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?
Kapan rilis androidnya?

6. TEKNIK INFORMATIKA
UNISNU JEPARA
● Andi memutuskan untuk belajar
Java Android
● Berjam jam berhari hari ia
habiskan waktu
● Hingga akhirnya ia memiliki dua
tombol ...

7. TEKNIK INFORMATIKA
UNISNU JEPARA
Android appiOS app

8. TEKNIK INFORMATIKA
UNISNU JEPARA

9. TEKNIK INFORMATIKA
UNISNU JEPARA

10. TEKNIK INFORMATIKA
UNISNU JEPARA

11. TEKNIK INFORMATIKA
UNISNU JEPARA

12. TEKNIK INFORMATIKA
UNISNU JEPARA

13. TEKNIK INFORMATIKA
UNISNU JEPARA

14. TEKNIK INFORMATIKA
UNISNU JEPARA

15. TEKNIK INFORMATIKA
UNISNU JEPARA

16. TEKNIK INFORMATIKA
UNISNU JEPARA

17. TEKNIK INFORMATIKA
UNISNU JEPARA

18. TEKNIK INFORMATIKA
UNISNU JEPARA

19. TEKNIK INFORMATIKA
UNISNU JEPARA
Why Flutter?
● Hot reload
Sama seperti web design, ketika menyimpan, di browser tekan refresh
maka seketika tampilan akan berubah
● Access to original source code
Ketika anda ingin melihat bagaimana sebuah tombol di Flutter bekerja,
anda tinggal klik class tersebut dan bisa dilihat bagaimana susunan
source codenya

20. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps

21. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold

22. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold
AppBar

23. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold
AppBar Container

24. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold
AppBar Container
Column

25. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold
AppBar Container
Column
Row TextT

26. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold
AppBar Container
Column
Row TextT
Text Icon
T

27. TEKNIK INFORMATIKA
UNISNU JEPARA
Structure of a Flutter apps
Scaffold
AppBar Container
Column
Row Text
Text Icon

28. TEKNIK INFORMATIKA
UNISNU JEPARA

29. TEKNIK INFORMATIKA
UNISNU JEPARA
Setup and Installation
● Prerequisites for flutter development:
○ Mac, Windows or Linux machine
● Editor to write code
○ Android Studio or Visual Studio Code
● Testing Android Apps from Flutter
○ Android Emulator or physical device
○ iOS Emulator or physical device
● Note for iOS apps development: Mac is a MUST

30. TEKNIK INFORMATIKA
UNISNU JEPARA
Minumum System Requirements
● Intel core i5 with minimum 4GB of RAM (8GB RAM recommended)
● Storage minimum 10GB (for android SDK)
● Git scm

31. TEKNIK INFORMATIKA
UNISNU JEPARA
Installation
1. Download Android Studio dari https://developer.android.com/studio
2. Lakukan instalasi, didalam tahapan instalasi akan ada instalasi android
SDK, ikuti default tahapan instalasinya menggunakan wizard. Termasuk
mendownload image Emulator, diusahakan menggunakan android
minimal versi nougat.
3. Download flutter sdk di https://flutter.dev/docs/get-started/install
sesuaikan dengan sistem operasi komputer yang anda miliki.
4. Extrak flutter sdk langsung di folder terluar di C:, mIsal di C:src
5. Jalankan flutter_console.bat yang sudah diekstrak di C:srcflutter
6. Tambahkan path di environment variable untuk lokasi C:srcflutterbin
7. Untuk editor VSCode/Android Studio tambahkan extensions/plugin Flutter

32. TEKNIK INFORMATIKA
UNISNU JEPARA
Hello World
● Dari VSCode pilih View > Command Palette > Flutter New Project
● Masukkan hello_world
● Pilih lokasi project, misal di C:UsersuserVSCodeProjects
● Patikan emulator sudah berjalan / perangkat fisik dikenali
● Tekan F5 untuk menjalankan

33. TEKNIK INFORMATIKA
UNISNU JEPARA

34. TEKNIK INFORMATIKA
UNISNU JEPARA
SEKIAN