Pengenalan dan Persiapan Pemrograman Mobile dengan Flutter

Apa itu Flutter?

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS.

Apa bedanya membuat aplikasi android menggunakan Android Studio (native) dengan Flutter?

Perbedaan pertama:

Ada fitur hot reload yang disediakan oleh Flutter.

Hot Reload pada Flutter

Ini akan membuat kita ngoding android terasa seperti ngoding web. Setiap ada perubahan, kita tidak perlu kompilasi atau build ulang untuk melihat hasilnya.

Sedangkan pada Android Studio, kita harus melakukan build APK di setiap kali kita ingin men-debug dan melihat hasil aplikasi pada emulator.

Kadang proses ini memakan waktu yang cukup lama, apalagi spek komputer yang digunakan tidak terlalu tinggi.

Perbedaan kedua:

Kemudian perbedaan berikutnya dari bahasa pemrograman yang digunakan. Flutter menggunakan bahasa pemrograman Dart, sedangkan Android Studio menggunakan bahasa pemrograman Java dan Kotlin.

Baca juga: [Tutorial] Belajar Bahasa Pemrograman Dart.

Perbedaan ketiga:

Aplikasi yang kita buat dengan Flutter dapat di-build ke Android dan iOS. Sedangkan Android Studio hanya bisa di-build ke Android saja.

Ini untungnya belajar Flutter, sekali coding…aplikasi bisa digunakan pada Android dan iOS.

Enak bukan?

Sampel Aplikasi Mobile yang dibangun dengan Flutter

Contoh-contoh aplikasi yang dibangun dengan Flutter:

• Alibaba (Android);
• Google AdWords (Android);
• App Tree (Android);
• Topline (Android);
• Hamilton (Android dan iOS);
• dll. (selengkapnya cek di: showcase).

Lalu… Apa bedanya Flutter dengan React Native bang?

Pertanyaan ini saya simpan dulu, karena saya belum mencoba React Native. Mungkin nanti setelah mencobanya, saya akan jawab dan edit postingan ini.

Apa Saja Peralatan yang Harus disiapkan untuk Belajar Flutter?

Ada beberapa peralatan yang harus kita install untuk memulai belajar dan membuat aplikasi dengan Flutter:

1. Java Development Kit (JDK);
2. Android Studio;
3. Android SDK;
4. Flutter SDK;
5. Teks Editor (atau bisa juga pakai Android Studio).

Lah, kenapa kok harus install JDK dan Android Studio?

Begini penjelasannya:

1. Install JDK

Peralatan esensial yang paling dibutuhkan sebenarnya Flutter SDK, Android SDK, dan Teks Editor saja.

Namun, karena kita butuh Android Studio untuk menginstal Android SDK, maka kita juga harus install Java JDK donk!

Silahkan install Java JDK di Linux dengan perintah ini:

# install versi 11
sudo apt install openjdk-11-jdk openjdk-11-jre openjdk-11-jdk-headless
# install versi 8
sudo apt install openjdk-8-jdk openjdk-8-jdk-headless openjdk-8-jre

Pada komputer saya, JDK yang digunakan adalah versi 10. Ini mungkin bawaan dari Kubuntu 18.04.

2. Install Android Studio dan Android SDK

Kita membutuhkan Android Studio untuk menginstall Android SDK, silahkan ikuti tutorial ini: Cara Install Android Studio di Linux.

Setelah itu, nanti kita akan memiliki direktori Android di dalam direktori home. Direktori ini berisi Android SDK yang kita butuhkan untuk pengembangan aplikasi android.

Ukurannya cukup besar, bahkan sampai puluhan GB jika kita install semua system image dan API Android-nya.

Tugas kita berikutnya adalah menambahkan direktori ~/Android/Sdk ke dalam file ~/.bashrc, agar perintah android dapat digunakan pada terminal dan flutter juga dapat mendeteksinya.

Silahkan buka file ~/.bashrc dengan nano:

nano ~/.bashrc

Lalu pada bagian akhir tambahkan baris ini:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools

Sehingga akan menjadi seperti ini:

Tutup teks editor nano dengan menekan Ctrl+x lalu ketik y untuk menyimpan dan terakhir tekan Enter.

Setelah itu, coba buka terminal baru dan ketik perintah:

android --version

Jika muncul seperti ini:

Berarti berhasil!

3. Install Flutter SDK

Peralatan yang dibutuhkan berikutnya adalah Fluter SDK.

Silahkan buka ini untuk mendownload Flutter SDK: https://flutter.io/get-started/install/

Flutter SDK tersedia untuk tiga platform: Windows, Linux, dan MacOs.

Silahkan pilih sesuai sistem operasi yang digunakan. Saya sendiri tentunya akan memilih: Linux.

Nanti kita akan diberikan link download SDK, pilih salah satu.

Setelah mendapatkan arsip tar.xz, silahkan esktrak ke tempat yang digininkan.

Saya sendiri akan ekstraknya ke ~/apps/, karena di sana saya biasanya menaruh beberapa aplikasi.

Setelah itu, buka lagi file ~/.bashrc dan tambahkan direktori Flutter di bagian akhir.

export PATH=$PATH:~/apps/flutter/bin/

Sehingga akan menjadi seperti ini:

Setelah disimpan, silahkan buka terminal baru dan ketik perintah:

flutter

Jika muncul seperti ini:

Maka, kita sudah berhasil menginstal Flutter.

4. Pemeriksaan dengan Flutter Doctor

Sebelum kita membuat aplikasi dengan Flutter, kita perisksa dulu kesiapan peralatan yang kita install.

Silahkan ketrik perintah berikut untuk memeriksanya:

flutter doctor

Apabila tampila centang seperti ini:

Berarti, Flutter sudah siap digunakan untuk membuat aplikasi Android.

Bila kamu mendapatkan masalah seperti:

• Library yang dibutuhkan belum terinstall di komputer kita;
• Android SDK tidak dapat terdeteksi oleh Flutter
• dll.

Biasanya akan ada saran link yang harus dibuka dan perintah yang harus diketik.

Contoh:

Error tersebut disebabkan karena saya belum menyetujui lisensi Android SDK. Di sana saya diminta untuk mengetik perintah flutter doctor --android-licences.

Membuat Aplikasi Android dengan Flutter

Cara membuat aplikasi baru, kita bisa ketik perintah:

# Membuat project baru
flutter create nama_apps

# pindah ke direktori project
cd nama_apps

Sebagai contoh, saya akan membuat aplikasi bernama hello_apps:

Tunggu sampai selesai, dan jangan lupa langsung masuk ke direktori project-nya.

Isi direktori project Flutter akan seperti ini:

Tidak perlu mengubah apapun di dalam aplikasi ini, kita langsung coba jalankan pada emulator.

Kita bisa menggunakan emulator dari Android Studio dan juga handphone fisik.

Saya akan menggunakan handphone fisik dengan OS Android Kitkat dan prosesor ARM.

Catatan: Saat ini Flutter belum mendukung build untuk prosesor x86. (cek ke Faqs)

Silahkan tancapkan handphone ke laptop/komputer dengan kabel data. Pastikan handphone-nya sudah diaktifkan developer options.

Kemudian, coba ketik perintah berikut:

fluter devices

Jika tampil seperti ini:

Artinya, handphone kita berhasil terdeteksi oleh Flutter.

Selanjutnya kita tinggal ketik perintah:

flutter run

Perintah tersebut untuk melakukan kompilasi, pembuatan APK, dan menjalankannya ke handphone.

Pastikan komputer terkoneksi dengan internet, karena Flutter akan membutuhkan beberapa dependency saat baru pertama kali melakukan build.

Hasilnya:

Output pada terminal saat aplikasi di jalankan

Lalu pada Android:

Aplikasi android yang dibuat dengan Flutter

Selamat …

Aplikasi pertama kita yang dibuat dengan Flutter telah berhasil berjalan tanpa error.

Apa Selanjutnya?

Saya akhiri tutorial ini sampai di sini…

Tentu ini masih belum cukup, karena masih ada lagi yang harus dibahas seperti:

• Bagaimana cara menggunakan VS Code untuk coding Flutter?
• Bagaimana cara menggunakan Android untuk coding Flutter?
• Bagaimana cara menggunakan Android Emulator bawaan Android Studio untuk uji coba aplikasi Flutter?
• Memahami struktur direktori project Flutter.
• dan masih banyak lagi.

Akhir kata…

Selamat belajar.

Learn more

Learn more

diaz iranian   February 07, 2019

Design metec

REV.IEW

• branding
• web

The outdated brand image of the Finnish company producing water and electricity metering solutions required to give it the character and to make out the basic publishing rules.

The scope included refreshing the logotype, creating the brandbook and designing the whole new, onepage website.
Done at Tonik.

Learn more

Learn more

diaz iranian   January 30, 2019