Flutter Mobile Quick Development Guidance

Quick development guide

1. FLUTTER for mobile app development © 2021 - 2022 V 1.1-0322

2. 2 Flutter SDK Installation Flutter SDK (Dart SDK included) -> pilih v 2.5.1 stable seperti yang digunakan pada project kali ini https:// flutter.dev /docs/get-started/install/windows https:// flutter.dev /docs/get-started/install/ macos https:// flutter.dev /docs/get-started/install/ linux Android Studio (include Android SDK & emulator) -> Windows/Mac/Linux https://developer.android.com/studio ( versi yang digunakan minimal Arctic Fox ). Anda juga bisa menggunakan IDE lain seperti VSCode atau IntelliJ. XCODE (include iOS SDK & emulator) -> Mac only https://developer.apple.com/download/ ( versi yang digunakan minimal 13.2.1 )

3. 3 flutter SDK Installation Setting Flutter Path to Environment Variable (optional) Control Panel -> System and Security -> System -> Advanced System Settings Pilih tab Advanced , cari tombol Environment Variables … Pada User variables for … cari Path kemudian klik Edit Pada form Edit environment variable , klik tombol New dan tambahkan lokasi path dimana Flutter SDK terinstall , misal C:\ src \flutter\bin Jalankan Terminal -> ketik command Masukkan password apabila diminta . Scroll kebagian terbawah kemudian tambahkan pathnya , misal /Users/ user_name /flutter/bin Tekan Control dan X untuk menutup , kemudian tekan Y untuk menyimpan perubahan Flutter Doctor, digunakan untuk memeriksa instalasi Flutter apakah sudah sesuai atau belum , melalui Command Prompt/Terminal

4. 4 Flutter & dart plugin IDE SETUP – android studio Jalankan Android Studio Buka menu Configure/Preferences -> Plugins Cari plugin Flutter , kemudian install, klik Yes. Maka otomatis plugin Dart juga akan ikut diinstall Setelah plugin terinstall silahkan klik Restart Referensi : https:// flutter.dev /docs/get-started/ editor?tab = androidstudio Setup Android Emulator: Buka Android Studio, cari menu AVD Manager Kemudian Create Virtual Device... Referensi : https:// flutter.dev /docs/get-started/install/windows Setup Android Device: Aktifkan Developer Mode pada ponsel Android dan Enable USB Debugging Referensi : https:// developer.android.com /studio/debug/dev-options

5. 5 Flutter & dart plugin IDE SETUP – XCODE Pastikan anda menggunakan Mac OS Tidak disarankan menggunakan Hackintosh Pastikan pada Mac sudah terinstall XCODE, jika belum maka bisa mendownload langsung dari Apple App Store Setup Apple Device (iPhone): Pastikan iPhone sudah di registrasikan pada Apple Developer Account Tidak ada konfigurasi khusus yang diperlukan pada XCODE, karena XCODE hanya digunakan untuk melakukan proses building installer (file . ipa ) saja , untuk IDE development tools nya sendiri menggunakan Android Studio, VSCode atau IntelliJ

6. 6 Flutter Build android installer file Untuk membuat file installer Android (. apk ), maka berikut ini adalah langkah-langkahnya : Jalankan Android Studio, dan Open Project Flutter ( CostPro Mobile) Dari Project Tree, expand folder android -> app -> src -> main -> AndroidManifest.xml ( klik 2x untuk membuka pada editor) Setelah file AndroidManifest.xml terbuka , pada bagian menu bar atas klik Open for Editing in Android Studio . Maka akan dibuka 1 jendela baru (Open project in New Window)

7. 7 Flutter Build android installer file 4. Di jendela Android Studio yang baru , klik menu Build -> Generate Signed Bundle / APK… 5. Pilih opsi APK , dan klik tombol Next 6. Lengkapi data yang diperlukan

8. 8 Flutter Build android installer file 7. Pada bagian Key store path , pilih dimana lokasi key store disimpan , atau jika belum ada bisa membuat key store baru 8. Pada bagian Key Store password , masukkan password untuk key store nya 9. Pada bagian Key alias , silahkan pilih beberapa alias yang sudah didefinisikan saat membuat key store 10. Pada bagian Key password , masukkan password untuk key alias tersebut 11. Klik tombol Next

9. 9 Flutter Build android installer file 12. Pada bagian Destination Folder , anda dapat menentukan dimana lokasi file . apk akan disimpan 13. Pada bagian Build Variants , silahkan pilih release jika anda ingin membuat apk versi release 14. Klik tombol Finish , dan tunggu hingga proses building apk selesai 15. Setelah selesai maka file . apk akan tersedia ( klik locate ) dan sudah siap untuk didistribusikan

10. 10 Flutter Build android installer file Cara manual sesuai petunjuk dari Flutter Dev: https://docs.flutter.dev/deployment/android

11. 11 Flutter Build ios installer file Untuk membuat file installer iOS (. ipa ), maka harus dilakukan dari MacOS dan berikut ini adalah langkah-langkahnya : Open Project Flutter ( CostPro Mobile), ada 2 cara untuk melakukanya yaitu : # Cara pertama , buka folder project dari Explorer, browse ke bagian folder ios -> klik 2x Runner.xcodeproj untuk membukanya pada Xcode . atau # Cara kedua , buka project dari Android Studio, kemudian expand folder ios -> Runner.xcodeproj -> klik 2x project.pbxproj . Kemudian klik Open iOS module in Xcode .

12. 12 Flutter Build Ios installer file 2. Setelah project terbuka pada Xcode , anda bisa melengkapi konfigurasi build tambahan yang mungkin di perlukan . Expand Pods dan klik , maka Build Settings bisa diisi dan dilengkapi sesuai kebutuhan

13. 13 Flutter Build ios installer file 3. Untuk melakukan build, pastikan lisensi Apple Developer Account anda sudah dikonfigurasikan terlebih dahulu pada Xcode . Klik menu Product -> Build . Jika profile scheme release sudah siap , maka untuk membuat installernya melalui menu Product -> Archive 4. Langkah- langkah selanjutnya sama seperti saat build aplikasi iOS lainnya secara native. Karena Xcode pada Flutter project berfungsi sebagai builder saja , sedangkan untuk keperluan editing/development project tetap harus dilakukan dari IDE lain (Android Studio, VSCode ataupun IntelliJ)

14. 14 Flutter Build ios installer file Berikut ini adalah referensi video tutorial untuk running iOS flutter app pada iOS device melalui Xcode : https://www.youtube.com/watch?v=yje563K1p_Y

15. 15 Flutter Build ios installer file Berikut ini adalah referensi video tutorial yang lebih lengkap untuk release iOS flutter app melalui Xcode : https://www.youtube.com/watch?v=QXveZNowLdQ

16. 16 Flutter Build iOS installer file Cara manual sesuai petunjuk dari Flutter Dev: https://docs.flutter.dev/deployment/ios

17. 17 reference Build & Release Android App: https://docs.flutter.dev/deployment/android Signing Android App: https://support.google.com/googleplay/android-developer/answer/7384423?hl=en Building Android App for Release: https://docs.flutter.dev/deployment/android#building-the-app-for-release Build & Release iOS App: https://docs.flutter.dev/deployment/ios Apple AppStore Connect: https://appstoreconnect.apple.com/ Apple Developer Program: https://developer.apple.com/programs/ Other Youtube Tutorial: https://www.youtube.com/watch?v=QXveZNowLdQ