Flutter adalah SDK untuk pengembangan aplikasi Mobile yang dikembangkan oleh Google. Sama seperti React Native, Framework ini dapat digunakan untuk membuat atau mengembangkan Aplikasi Mobile yang dapat berjalan pada Device iOS dan Android.
Hal yang menarik pada Framework ini adalah semua kodenya di Compile dalam kode Native nya (Android NDK, LLVM, AOT-compiled) tanpa ada Intrepeter pada prosesnya sehingga proses Compile-nya menjadi lebih cepat.
Pada pembahasan kali ini, penulis menggunakan Dart sebagai bahasa pemrogramannya.Apa itu Dart? Bahasa pemrograman Dart merupakan bahasa pemrograman General-Purpose yang dirancang oleh Lars Bak dan Kasper Lund. Bahasa pemrograman ini dikembangkan sebagai bahasa pemrograman aplikasi yang dapat dengan mudah untuk dipelajari dan disebarkan.
Apa itu Dart ?
Bahasa pemrograman Dart merupakan bahasa pemrograman General-Purpose yang dirancang oleh Lars Bak dan Kasper Lund. Bahasa pemrograman ini dikembangkan sebagai bahasa pemrograman aplikasi yang dapat dengan mudah untuk dipelajari dan disebarkan.
Dart digunakan untuk mengembangkan berbagai macam platform termasuk di dalamnya adalah web, aplikasi mobile, server, dan perangkat yang mengarah pada teknologi Internet of Things.
Bahasa pemrograman tersebut dapat digunakan untuk mengembangkan aplikasi untuk dijalankan pada berbagai macam peramban modern. Dart juga dapat digunakan untuk mengembangkan aplikasi dari codebase tunggal menjadi aplikasi Android maupun iOS. Pada pembahasan kali ini, penulis menggunakan bahasa pemrograman Dart dan Flutter sebagai Framework nya.
Persiapan
Sebelum memulai yang lain, mari unduh dulu file-file yang diperlukan:
Setelah itu copykan file hasil ekstrak tadi (berupa folder dengan nama flutter) ke C: masing masing.
Kurang lebih jadinya seperti ini :
Langkah selanjutnya adalah Setting Environment Variable
Cara Setting Environment Variable
Klik pada icon Windows (Start), lalu ketikan Env, lalu akan muncul pilihan seperti dibawah ini
Lalu klik Edit the system environtment variables, lalu akan muncul seperti ini :
Klik pada Environment Variables
Akan muncul seperti ini :
Klik pada varible Path lalu klik tombol Edit
Akan muncul seperti ini :
Lalu klik tombol New, lalu isikan seperti ini :
C:\flutter\binlalu Enter, sehingga akan menjadi seperti gambar di atas (yang saya kotaki biru)
Lalu klik Ok.
Mungkin sebagain ada yang bingung kenapa kita harus setting environment variable, atau mungkin malahan tidak tau sama sekali mengenai Environment variable ini.
Jadi mungkin akan saya jelaskan sedikit (dengan bahasa yang mudah dipahami) mengenai si Environment variable ini.
Apa itu Environment variable ?
Environment varible dalah sebuah varibel yang ada pada komputer yang digunakan untuk menyimpan sebuah value barupa Path (alamat sebuah program yang telah diinstall) sehingga dapat digunakan untuk memanggil program tersebut.
Lalu kenapa kita harus setting Environment variable ?
Simpelnya karna nanti ketika kita develop aplikasi berbasis flutter dengan menggunakan VS Code kita akan banyak menggunakan terminal, nah untuk memanggil si flutter ini kita harus menyimpan alamat file bin yang ada pada folder flutter ke Environment Varible agar kita bisa memanggilnya lewat terminal.
Nah gimana? cukup jelas bukan?
Kalo masih ada yang bingung silahkan ditanyakan di kolom komentar.
Langkah selanjutnya ada Setting VS Code.
Tapi sebelumnya kita cek terlebih dahulu apakah flutter sudah berhasil terinstall di komputer kita.
Cara ceknya cukup mudah, buka CMD lalu ketikan flutter, lalu tekan tombol Enter dua kali.
Jika instalasi berhasil maka akan muncul seperti ini :
Mempersiapkan Visual Studio Code untuk Develop Aplikasi Flutter
Di sini saya hanya akan menjelaskan cara setting VS Code untuk flutter, saya tidak akan menjelaskan dari awal Instalasi VS Code dll, jadi saya asumsikan di komputer anda sudah terinstall VS Code.
Oke, langsung saja kita buka VS Code, lalu pilih Extension (icon sebelah kiri yang paling bawah)
Lalu cari Ekstensi dengan nama Flutter, setelah itu klik Install.
Lalu cari dan install ekstensi Dart
Note
Untuk versi VS Code terbaru mungkin ekstensi Dart sudah otomatis terinstall secara default, jadi tidak usah install lagi.
Cara Membuat Project Flutter baru
Buat folder baru, lalu buka folder tersebut di Visual Studo Code.
Lalu buka terminal (Ctrl+~).
Untuk bisa membuka terminal secara langsung di VS code, anda harus sudah mengaktifkan fitur Integrated terminal terlebih dahulu.
Jika belum, silahkan buka File » Preferences » Settting atau bisa juga menggunakan Shortcut (Ctrl+,).
Lalu pergi ke Features » Terminal.
Lalu pada bagian Explorer Kind pilih Integrated.
Jika sudah, kita buka terminalnya.
Lalu ketikan pada terminal perintah berikut ini.
flutter create projectbaruTunngu beberapa saat sampai proses selesai.
Jika sudah seperti gambar di atas, artinya project sudah berhasil dibuat.
Beberapa hal yang harus diperhatikan
Untuk develop aplikasi berbasis flutter menggunakan VS Code, kita butuh perantara untuk menjalankan aplikasi tersebut (Debugging & Running), perantara tersebut bisa berupa Emulator ataupun Device Android
Ketika anda memilih untuk menggunakan Emulator, maka anda juga harus menginstall Android Studio, lalu membuat Emulator disana menggunakan AVD yang sudah disedikan disana.
Kekurangan ketika memilih menggunakan Emulator adalah membutuhkan ram yang cukup besar (setidaknya butuh leptop yang memiliki Ram 8 ke atas)
Sedangkan untuk menggunakan Android Device sebagai Perantara anda harus melakukan beberapa konfigurasi terlebih dahulu,
Untuk lebih memudahkan, saya akan jelaskan juga Cara Membuat Emulator di Android Studio untuk menjalankan apliaksi flutter.
Cara Membuat Emulator di Android Studio untuk Running aplikasi Flutter
Pertama download dan install terlebih dahulu Android Studionya, Lalu install seperti biasanya
Jika proses instalasi sudah selesai, langsung saja buka android studionya.
Lalu buka AVD Manager (ada di pojok kanan).
Lalu pilih + Create Virtual Device.. (ada di pojok kiri bawah).
Lalu silahkan pilih jenis Smartphone apa yang ingin ana buat Emulatornya
Atau anda juga bisa mengatur sendiri Resolusi device-nya dengan memilih New Hardware Profile.
Jika sudah klik Next.
Lalu anda akan disuruh untuk memilih Sistem Operasi Android apa yang akan anda gunakan (usahakan pilih yang paling terbaru atau satu tingkat dibawahnya).
Apabila anda baru pertama kali membuat Emulator di Android Studio, maka anda akan disuruh mendownload Android yang akan dipakai terlebih dahulu.
Jika sudah, klik Next.
Anda akan disuruh memilih mode layar ketika pertama kali dijalankan (Potrait atau Landscape), pilih sesuai kebutuhan.
Jika sudah klik Finish.
Running Aplikasi Flutter
Setelah semua proses diatas telah selesai, kita akan langsung merunning aplikasi awal yang sebelumnya sudah dibuatkan oleh flutter pada saat kita membuat project baru di atas.
Oke langsung saja, silahkan buka project flutter yang ada di VS Code
Lalu melalui terminal, masuk ke folder project flutter yang sebelumnya sudah kita buat.
Caranya dengan mengetikan perintah berikut ke dalam terminal.
cd .\projectbaru\Lalu run aplikasi flutter dengan menggunakan perintah berikut
flutter runJangan lupa untuk menjalankan Emulator terlebih dahulu.
Atau, kita juga bisa menjalankan aplikasi flutter di VS Code dengan memanfaatkan fitur Debug yang ada di VS Code.
Caranya adalah, buka dulu project flutternya, Lalu cari dan buka file main.dart (biasanya ada di lib » main.dart).
Jika sudah. langkah selanjutnya adalah pergi ke Debug » Run Without Debugging.
Lalu pilih Emulator/Device Android yang ingin anda gunakan.
Lalu tunggu sampai Emulator berjalan dan proses Instalasi selesai (biasanya akan membutuhkan waktu yang cukup lama, apalagi untuk project besar).
Selamat ! aplikasi flutter pertama anda sudah berhasil berjalan.
