Thursday, March 28, 2019

Panduan Instalasi dan Membuat Projek Flutter dengan Android Studio

Membuat Projek Flutter
Tutorial Flutter : Cara Instalasi Flutter pada Windows dan Membuat Projek Flutter dengan Android Studio - Halo sobat Eduprog jika sebelumnya saya sudah membahas seputar perkenalan framework Flutter kali ini saya akan mengajak sobat untuk memulai instalasi dan segala sesuatu yang perlu disiapkan untuk memulai projek baru dengan Flutter dimana pada kasus ini menggunakan sistem operasi Windows.

IDE yang saya pilih di sini adalah Android Studio, walaupun banyak alternatif lain yang bisa sobat gunakan untuk pengembangan penulisan kode dengan framework Flutter, seperti IntelliJ IDEA atau Visual Studio Code (VS Code) yang lebih umum. Di sini saya memilih Android Studio sebagai pilihan IDE karena pada Android Studio terdapat fitur atau menu untuk membuka AVD Manager sehingga lebih singkat, selain itu target utama untuk pengembangan aplikasi pada kasus ini adalah untuk sistem Android.

Untuk mempersingkat waktu, langsung saja kita ke poin utama pembahasan pada materi ini yaitu melakukan instalasi dan pembuatan projek pada Flutter dengan Android Studio. berikut adalah hal-hal yang perlu anda lakukan :

Instalasi Flutter

Sebelum sobat melakukan instalasi Flutter pada sistem operasi Windows, sobat perlu memperhatikan beberapa aspek berikut, salah satunya adalah spek minimal yang dibutuhkan untuk proses instalasi.
  1. Sistem Operasi : Windows 7 SP1 atau yang lebih baru (64 bits).
  2. Ruang Hardisk : Ruang hardisk minimal yang dibutuhkan adalah 400 MB untuk framework saja (tidak termasuk IDE yang sobat gunakan).
  3. Tool : Flutter tergantung pada tool-tool ini yang harus tersedia di lingkungan pengembangan sobat. 
Jika Git untuk Windows sudah diinstal, pastikan Anda dapat menjalankan perintah git dari command prompt atau PowerShell. 

Mendownload SDK Flutter

Setelah sobat memperhatikan spesifikasi minimal yang dibutuhkan untuk melakukan instalasi Flutter pada Windows, sobat bisa melanjutkan dengan mengunduh SDK Flutter terbaru melalui link dibawah ini :
Lalu ikuti langkah-langkah berikut :
  1. Simpan hasil unduhan SDK flutter anda di lokasi yang anda kehendaki.
  2. Ekstrak file zip dan tempatkan folder flutter beserta isinya di lokasi pemasangan yang sobat inginkan untuk Flutter SDK (misalnya. C:\ src\ flutter; jangan instal Flutter di direktori seperti C:\Program Files\ yang membutuhkan hak akses istimewa).
  3. Temukan file flutter_console.bat di dalam direktori flutter. Lalu jalankan dengan mengklik dua kali.

Memperbaharui Path

Jika sobat ingin menjalankan perintah Flutter di konsol Windows secara umum, lakukan langkah-langkah berikut ini untuk menambahkan Flutter ke variabel PATH sistem Windows:
  • Mulai dengan mengklik Start lalu pada bar pencarian, ketik ‘env’ dan pilih Edit environment variables for your account
  • Lalu setelah fasilitas System Properties terbuka, pilih Environtment Variables..
  • Perhatikan pada bagian User Variables pada variable Path, pilih variable tersebut lalu tekan tombol Edit.
Variabel Path
  • Lalu tambahkan lokasi bin dari SDK Flutter dimana sobat mengekstrak sebelumnya. Misalnya D:\Libs\flutter\bin\
  • Lalu OK atau Simpan.
Yang perlu diperhatikan bahwa sobat harus menutup dan membuka kembali jendela konsol yang ada agar perubahan ini dapat diterapkan. Lalu ketikan Flutter maka, perintah tersebut akan segera dikenali oleh konsol Windows.

Memastikan Instalasi

Langkah selanjutnya adalah memastikan hasil intalasi SDK Flutter apakah sudah sesuai atau belum, untuk itu lakukan dari jendela konsol yang memiliki direktori Flutter (lokasi instalasi SDK sebelumnya), jalankan perintah berikut untuk melihat apakah ada dependensi platform yang sobat perlukan untuk menyelesaikan pengaturan:
D:\Libs\flutter>flutter doctor
Perintah diatas tujuanya adlah untuk memeriksa lingkungan pengembangan Flutter kita dan menampilkan laporan status pemasangan Flutter kita. Periksa output dengan cermat untuk perangkat lunak lain yang mungkin perlu Anda instal atau tugas lebih lanjut untuk dilakukan (ditunjukkan dalam teks tebal). Perintah ini sangat  berguna untuk memastikan apakah SDK Flutter yang kita install sudah siap digunakan atau belum.

Instalasi IDE (Android Studio)

Setelah sobat menyelesaikan instalasi SDK Flutter di atas, sekarang kita lanjutkan intalasi IDE yaitu Android Studio. Ikuti langkah-langkah berikut untuk memulai instalasinya:
  • Download Android Studio versi terbari di website resminya melalui link ini.
  • Install Android Studio dan SDK Android yang termasuk didalamnya.
  • Setelah instalasi Android Studi dan SDK Android selesai, lalu jalankan Android Studio dan install plugin Flutter melalui menu File - Setting - Plugins
Plugin Flutter di Android Studio

  • Selesai

Setting Emulator Android

Langkah paling cepat untuk menjalankan aplikasi yang kita buat dengan Flutter atau perubahan-perubahan kode yang kita lakukan adalah dengan menggunakan Emulator, pada saat instalasi Android Studio terdapat fasilitas AVD Manager yang bisa kita gunaan untuk membuat Emulator Android. Langkah-langkahnya adalah sebagai berikut:
  • Jalankan Android Studio lalu buka menu Tool - AVD Manager lalu pilih Create Virtual Device.
  • Pilih tipe device dan versi sistem operasi Android yang anda inginkan, sobat akan segere mendownload jika image dari versi Android tersebut belum ada.
  • Jalankan Virtual Device yang baru sobat buat.
  • Selesai.

Membuat Projek Flutter

Setelah sobat mempersiapkan semua perlengkapan yang dibutuhkan untuk membuat dan mengembangkan aplikasi mobile dengan Flutter saat nya kita memulai pembuatan projek baru dengan Flutter pada IDE Android Studio.
Pada langkah sebelumnya kita telah memasang plugin Flutter pada Android Studio dimana dengan plugin ini secara otomatis Android Studio akan mengenali Flutter dan Dart di dalam lingkunganya. Salah satunya adalah menu untuk pembuatan projek Flutter dengan template yang telah disediakan melalui langkah-langkah berikut ini:

  • Buka Android Studio lalu pilih menu File - New - New Flutter Project.. sehingga akan ada 4 pilihan yaitu Flutter Application, Flutter Plugin, Flutter Package, dan Flutter Module.
  • Pilih Flutter Application seperti gambar dibawah ini.
Membuat Projek Baru Flutter
  • Lalu tekan tombol Next dan sobat akan diminta untuk mengisikan nama projek (secara default adalah flutter_app), untuk penamaan projek flutter disarankan menggunakan huruf kecil (lower case) semua dan menggunakan _ (underscore) sebagai pemisah kata dalam nama projek. Misalnya nama projeknya adalah projek_anuku. Pilih lokasi penyimpanan projek yang sobat sukai dan berikan deskripsi dari projek tersebut.
  • Tekan tombol Next maka sobat diminta mengisikan Company Domain (misalnya : eduprog.net) dan biarkan isian Package Name sesuai yang di generate oleh aplikasi.
  • Tekan tombol Finish sehingga akan terbuka projek Flutter baru di Android Studio sobat seperti dibawah ini.
Projek Flutter

Menjalankan / Debug Projek Flutter

Setelah sobat berhasil membuat projek baru Flutter di Android Studio pada langkah sebelumnya, sekarang waktunya untuk menjalankan atau men-debug projek Flutter tersebut untuk melihat hasil nya secara langsung di emulator Android yang telah kita install sebelumnya.

  • Pada aplikasi Android Studi pilih menu Tool - AVD Manager, pilih Virtual Device yang telah sobat buat sebelum nya lalu jalankan.
  • Setelah Virtual Device jalan, lalu kembali ke aplikasi Android Studio dan tekan kombinasi tombol Shift+F10 (atau tekan icon Play) untuk mode Run atau tekan Shift+F9 (atau tekan icon Kutu) untuk mode Debug.
  • Tunggu beberapa saat (jika tidak ada kesalahan) lalu alihkan fokus kita ke Virtual Device maka akan muncul tampilan aplikasi dari projek Flutter kita.
Virtual Device

Nah, sobat eduprog sampai di sini dulu pembahasan tentang panduan instalasi dan membuat projek Flutter sampai cara menjalankan projek Flutter di Android Virtual Device, sampai jumpa di tutorial selanjutnya.
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: