Memasang Framework Flutter untuk Android di Windows

Bagikan jika Anda sukai postingan ini!

Logo Flutter
Logo Flutter

Dengan menemukan postingan artikel ini, artinya Anda sudah mengenal apa itu Flutter. Jadi saya tidak perlu menjelaskannya ya? Memasang pustaka Flutter memang sedikit rumit, apalagi pada komputer dengan sistem operasi Windows. Misalnya komputer saya yang menggunakan sistem operasi Windows 7. Jika Anda masih belum berhasil memasang Flutter di Windows, mudah-mudahan bisa terbantu dengan artikel ini.

Langkah pertama adalah mengunduh pustaka Flutter di sini https://flutter.dev/docs/get-started/install/windows. Kemudian ekstrak berkas unduhan. Di mana? Sebagai contoh, saya menyimpan semua yang berkaitan dengan Android di alamat D:\Android. Termasuk Android Studio, saya pasang di lokasi tersebut.

Lokasi penyimpanan semua hal tentang Android

Perhatikan gambar di atas. Untuk lokasi pemasangan Android Studio, saya tempatkan pada folder Studio. Kemudian untuk SDK Android, saya tempatkan pada folder sdk. Maka, saya pun mengekstrak berkas unduhan di D:\Android ini, sehingga tercipta folder baru dengan nama flutter saat mengekstrak.

Setelah pengekstrakan, langkah berikutnya adalah menambahkan alamat-alamat yang dibutuhkan pada Environtment dari Windows. Caranya, klik tombol Start pada Taskbar Windows Anda, kemudian ketikkan: env.

Mencari env
Mencari env

Kemudian akan ditampilkan 2 (dua) buah aplikasi yang terkait dengan env dengan kategori Control Panel. Klik pada Edit environment variable for your account.

Akan ditampilkan dialog Environtment Variables. Pada dialog akan ditampilkan 2 (dua) buah kotak daftar (listbox) yaitu: User variables for {Nama Pengguna}, dan System variables.

Dialog Environment Variables
Dialog Environment Variables

Anda harus menambahkan alamat-alamat yang diperlukan. Kita mulai dari kotak daftar paling atas (User variables for {Nama Pengguna}). Klik pada variabel dengan nama Path, kemudian klik tombol Edit… maka akan ditampilkan dialog Edit User Variable.

Dialog Edit User Variable
Dialog Edit User Variable

Jika sudah terdapat nilai pada Variable value, jangan hapus nilai tersebut. Bubuhkan tanda titik koma (semicolon) “;” di akhir nilai, kemudian tambahkan nilai baru lainnya.

Pada variabel Path ini Anda perlu menambahkan nilai berupa lokasi penempatan SDK Android serta lokasi folder bin dari lokasi Flutter yang sudah Anda ekstrak dari berkas unduhan sebelumnya. Sebagai contoh, SDK Android saya berlokasi di D:\Android\sdk, sedangkan pustaka flutter berlokasi di D:\Android\flutter.. Dan sebelumnya pada Variable value sudah terdapat nilai yaitu: C:\Program Files\Microsoft VS Code, maka nilai Variable value untuk Path ini saya ubah menjadi:

C:\Program Files\Microsoft VS Code;D:\Android\sdk;D:\Android\flutter\bin

Jika Anda tidak mengetahui lokasi SDK Android Anda, buka Android Studio kemudian klik menu File, kemudian Settings… Pada dialog Settings yang ditampilkan, klik ganda cabang Appearance & Behavior, klik ganda lagi pada cabang System Settings, kemudian klik pada cabang Android SDK. Lokasi SDK Android akan ditampilkan pada kotak Android SDK Location.

Lokasi SDK Android pada dialog Settings
Lokasi SDK Android pada dialog Settings

Selanjutnya pada kotak daftar kedua (System variables), temukan baris variabel Path, pilih kemudian klik tombol Edit…. Sama seperti cara di atas, tambahkan lokasi penempatan SDK Android serta lokasi folder bin dari lokasi Flutter yang sudah Anda ekstrak. Jangan lupa menambahkan titik koma (semicolon) pada akhir nilai dari Variable value jika sebelumnya sudah berisi nilai.

Mengubah nilai variabel Path
Mengubah nilai variabel Path
...;D:\Android\sdk;D:\Android\flutter\bin

Masih pada kotak daftar kedua (System variables), klik tombol New… untuk menampilkan dialog New System Variable. Isi kotak Variable name dengan ANDROID_HOME serta isi kotak Variable value dengan lokasi SDK Android Anda, misalnya: D:\Android\sdk.

Menambahkan System Variable ANDROID_HOME
Menambahkan System Variable ANDROID_HOME

Tutup dialog dengan mengklik tombol OK.

Jalankan Android Studio. Setelah masuk ke lingkungan pengembangan, klik menu File kemudian Setting… maka akan ditampilkan dialog Setting. Klik pada cabang Plugins.

Dialog Settings Android Studio
Dialog Settings Android Studio

Klik pada tab Marketplace, kemudian ketikkan flutter pada kotak pencarian kemudian tekan Enter.

Memasang plugin Flutter
Memasang plugin Flutter

Klik tombol Install pada item Flutter yang ditampilkan dari hasil pencarian. Klik tombol Yes saat ditampilkan kotak pesan konfirmasi.

Tunggu beberapa saat untuk pengunduhan dan pemasangan plugin. Setelah pemasangan berhasil, tombol Install akan berubah menjadi Restart IDE. Klik tombol tersebut untuk menjalankan ulang Android Studio. Klik tombol Restart saat ditampilkan kotak pesan konfirmasi.

Selanjutnya, buka lokasi pengekstakan Flutter Anda, temukan berkas flutter_console.bat, jalankan berkas dengan mengklikganda.

Menjalankan Flutter Console
Menjalankan Flutter Console

Ketikkan perintah flutter doctor pada Command Prompt yang ditampilkan kemudian tekan Enter.

Tampilan hasil ekseskusi perintah flutter doctor
Tampilan hasil ekseskusi perintah flutter doctor

Pada tampilan hasil eksekusi perintah flutter doctor sudah terbaca versi Flutter yang digunakan, versi SDK Android, dan versi Android Studio yang digunakan.

[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 6.1.7601], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.4)

Sekarang kita coba membuat proyek baru pada Android Studio. Klik menu File, kemudian New, akan tampil menu baru yaitu New Flutter Project…, klik menu tersebut.

Menu New Flutter Project
Menu New Flutter Project…

Pilih pola Flutter Application pada dialog Create New Flutter Project yang ditampilkan, kemudian klik Next.

Dialog Create New Flutter Project
Dialog Create New Flutter Project

Lengkapi informasi yang diminta oleh wisaya berikutnya, kemudian klik tombol Next.

Menentukan pengaturan Aplikasi Flutter baru
Menentukan pengaturan Aplikasi Flutter baru

Pada wisaya berikutnya tentukan nama paket (package) dari aplikasi Flutter Anda. Akhiri dengan mengklik tombol Finish.

Menentukan nama paket aplikasi
Menentukan nama paket aplikasi

Ya, Anda sudah siap berkreasi membuat aplikasi Android dengan Flutter.

Lingkungan kerja Flutter pada Android Studio
Lingkungan kerja Flutter pada Android Studio