Cara Install Flutter - Membuat Mobile Apps dengan Flutter (Bagian 1)

Daftar Isi

Halo sobats,

Pada kesempatan kali ini saya akan membuat catatan tentang projek belajar saya untuk membuat Mobile Apps dengan menggunakan Flutter Bagian 1 yaitu Cara Install Flutter-nya terlebih dahulu tentunya, dan membagikannya juga untuk sobats semua yang mungkin saja kebetulan sedang ingin membuat projek yang sama.

Kenapa Flutter

Tentang kenapa saya akan menggunakan Flutter untuk project belajar membuat aplikasi mobile sudah saya tulis di laman Flutter Project, sobats bisa cek disitu untuk lebih lengkapnya.

Secara sederhana, saya ingin membuat aplikasi mobile atau mobile apps dengan sekali jalan dan bisa diproduksi untuk Android sekaligus iOS. hehe...

Apa itu Flutter

Flutter adalah Application Development Framework atau Kerangka Kerja Pengembangan Aplikasi Mobile open-source yang dibuat oleh Google.

Bahasa pemrograman yang digunakan Flutter adalah bahasa pemrogaman Dart.

Salah satu fitur kunci Flutter adalah kemampuannya dalam merancang user interface yang konsisten dan responsif dengan menggunakan beragam custom widget yang tersedia yang akan sangat membantu developer dalam pengembangan aplikasinya.

Cara Install Flutter

Sebelum menginstall Flutter, harap sobats perhatikan dulu bahwa sistem operasi yang terinstall di komputer sobats minimal adalah Windows 7 ya...

Sobats bisa juga ikuti langkah-langkah instalasinya langsung dari Flutter Get started.

Okay sobats, langsung saja kita lanjut...


Berikut ini langkah-langkah cara install Flutter di komputer kita.

1. Download Windows PowerShell

Jika sobats menggunakan Windows 7, silakan sobats download Windows PowerShell terlebih dulu melalui tombol di bawah.

Namun jika sobats menggunakan Windows 10 atau Windows 11, tidak perlu lagi karena Windows PowerShell telah tersedia di dalam Windows 10 dan Windows 11.

2. Download Git for Windows

Selanjutnya download Git for Windows terbaru untuk pengelolaan source code.

Disini saya menggunakan Git for Windows versi 2.45.0

Jika sudah didownload, lanjut lakukan install dengan klik 2x file Git.exe-nya.

Klik Next saja sampai selesai, tidak ada yang perlu dikostumisasi.

Setelah terinstall, buka Windows PowerShell (klik tombol Start, ketikkan powershell, lalu klik Enter).

Setelah terminal Windows PowerShell terbuka,
Ketikkan Git, lalu tekan Enter.

Maka akan tampil teks berikut jika installasi Git tadi berhasil.

3. Download Flutter SDK

Berikutnya kita akan download dan install Flutter SDK.

Disini saya akan download Flutter SDK Windows versi 3.19.6 Stable, silakan sobats download melalui tombol di bawah (ukuran file: 955MB):

Atau jika ingin mendapatkan versi yang lebih lawas atau lebih baru (jika sudah ada), sobats silakan kunjungi laman Archive Flutter SDK untuk memilihnya.

Setelah selesai download, kita bisa copy atau pindahkan file zip Flutter SDK ini ke folder:

C:\src

Jika sobats belum punya folder "src", silakan dibuat dulu ya.

Di This PC pilih Disk C:\

Di dalam Disk C:\
Klik kanan >> New >> Folder.

Selanjutnya extract file zip Flutter SDK-nya di folder ini "Extract Here" menggunakan software zip extractor seperti WinRAR atau 7zip.

4. Tambahkan Path di Windows Environment Variables

Klik tombol Start atau Windows pada keyboard, ketikkan environment (biasanya belum lengkap kita ketik juga sudah muncul), pilih Edit the system environment variables.

Muncul jendela popup, klik Environment Variables.

Pada jendela Environment Variables, pilih Path pada bagian User variables, klik Edit...

Klik tombol New,
Tulis atau paste lokasi folder bin pada flutter SDK hasil extract kita sebelumnya.

Di komputer saya lokasinya di:

C:\src\flutter\bin

Kemudian klik tombol OK;

Klik OK lagi;
Klik OK lagi.

Untuk memastikan sudah terpasang dengan benar, kita cek melalui Windows PowerShell lagi.

Klik Start atau Windows, ketikkan PowerShell, pilih Windows PowerShell.

Ketikkan perintah:

flutter

Tekan Enter.

Jika pengaturan yang kita lakukan sudah benar, maka akan muncul tampilan berikut:

Kita sekarang juga sudah bisa mengecek progress dari proses instalasi Flutter kita sobats.

Caranya buka lagi Windows PowerShell, ketikkan perintah:

flutter doctor

Tekan Enter.

Maka akan muncul progress kita sudah sampai mana dan bagian mana yang masih belum terinstal:

Nah di atas terlihat:

• Flutter sudah centang hijau.
• Android toolchain (Android SDK) masih belum terinstall.
• Android Studio juga belum terinstall.

Jadi berikutnya kita install Android SDK.

5. Install Android Studio

Nah, cara termudahnya install Android SDK adalah dengan install Android Studio.

Jadi sekarang kita akan install Android Studionya.

Download dulu Android Studio untuk Windows 64bit (1.2GB):

Atau sobats bisa kunjungi https://developer.android.com/studio?hl=id untuk pilihan paket download yang lebih lengkap.

Setelah download selesai, kita lanjut dengan melakukan install.

Lakukan install seperti biasa, klik tombol Next >> Next >> Next >> Install dan tunggu sampai proses instalasi selesai.

Setelah Completed, klik tombol Next.

Centang bagian "Start Android Studio" dan klik Finish.

Pilih "Do not import settings", klik OK.

Klik Next.

Pilih setup yang Standard, klik Next.

Klik Next lagi...

Klik pada bagian Licenses android-sdk-license, klik Accept.

Klik juga pada bagian Licenses intel-android-extra-license, klik Accept juga, lalu klik Finish.

Sekarang Android Studio akan download beberapa file yang kita butuhkan.

Prosesnya bisa lumayan lama ya sobats, jadi kita tunggu saja sampai proses downloadnya selesai.

Setelah selesai klik Finish.

Selanjutnya kita cek lagi progress installasinya dengan perintah:

flutter doctor

Seperti yang terlihat, sudah ada progress, Android Studio sudah centang hijau.

Selanjutnya kita bereskan dulu bagian [ ! ] Android toolchain (Android SDK) yang masih ada 2 pesan error:

• cmdline-tools component is missing
• Android license status unknown

dengan melakukan pengaturan Android SDK Tools di Android Studio.

6. Setting Android SDK di Android Studio

Okay, selanjutnya kita beralih ke Android Studio lagi.

Pada bagian depan "Welcome to Android Studio", kita klik More Actions >> SDK Manager.

Pilih tab SDK Tools, centang bagian Android SDK Command-line Tools (latest);
Klik Apply.

Muncul jendela konfirmasi, Klik OK.

Tunggu proses download hingga selesai... klik Finish.

Lanjut klik Apply, lalu klik OK.

Sekarang kita cek lagi progress installasinya dengan perintah:

flutter doctor

Nah... sekarang Android SDK sudah terinstall, tapi masih ada tanda seru [ ! ] Android toolchain.

Disini kita perlu accept terlebih dahulu beberapa Android licenses-nya.

Ketikkan perintah:

flutter doctor --android-licenses

Tekan Enter.

Akan muncul terms dari Android License Agreement, untuk melanjutkannya kita ketikkan saja:

y

Lalu tekan Enter.

Lanjut lagi ketikkan "y" dan tekan Enter untuk semua pernyataan license agreementnnya.

Lanjutkan sampai muncul pesan "All SDK Package licenses accepted".

Okay... sekarang kita cek lagi progressnya di flutter doctor.

Ketikkan perintah:

flutter doctor

Tekan Enter.

Okay...
Pesan error masih muncul di Visual Studio.

Ini mungkin opsional, karena kita bisa saja melakukan coding langsung di Android Studio.

Tapi para senior menganjurkan untuk melakukan coding menggunakan Visual Studio yang relatif lebih ringan untuk digunakan dibandingkan Android Studio.

Maka saya disini juga akan menginstall Visual Studio dan nanti akan melakukan coding disana.

Kita Download Visual Studio Code.

Disini saya download Visual Studio Code for Windows 64bit; sobats bisa download juga melalui tombol berikut.

Atau jika ingin mendownload untuk OS lain, silakan sobats pilih sendiri sesuai OS komputer sobats di https://visualstudio.microsoft.com/downloads/.

7. Install Visual Studio Code

Setelah file installer-nya terdownload, kita lanjutkan dengan instalasinya.

Seperti biasa, pilih "I accept the agreement", klik Next >> Next >> Next >> Next >> Install.

Tunggu sampai prosesnya selesai... klik Finish.

Sekarang di dalam aplikasi Visual Studio Code, kita pilih menu Extension.

Ketikkan:

flutter

Pilih Flutter yang dari Dart Code, dan klik Install.

Tunggu hingga Flutter Extension selesai diinstall.

Done.
Nah sekarang Extension Flutter (dan otomatis menginstall extension Dart sebagai paketnya) sudah selesai kita install di Visual Studio Code.

Secara umum proses kita dalam melakukan install Flutter sudah selesai.

Meskipun mungkin jika di cek di flutter doctor sobats pada bagian Visual Studio tadi masih dapat pesan error, tapi itu tidak masalah untuk saat ini karena kita belum akan mengembangkan apps untuk Windows, melainkan untuk mobile apps.

8. Test Flutter di Visual Studio Code

Berikutnya, di dalam aplikasi Visual Studio Code, kita klik View, pilih Command Palette...

Kettikkan:

flutter

Pilih Flutter: New Project

Pilih Application

Pilih folder tempat kita ingin menyimpan project flutter kita.
Lalu klik Select a folder to create the project in

Beri nama sesuai keinginan kita... dan klik Enter.

Muncul jendela popup, centang Trust the authors... lalu klik tombol "Yes, I trust the authors".

di pojok kanan bawah kita akan melihat jendela popup notifikasi loading, tunggu hhingga selesai.

dan... Project Apps 1 Flutter kita sudah ready.

Kita bisa coba jalankan dengan menekan tombol F5 pada keyboard.

Lalu untuk saat ini kita pilih saja dulu yang Available Devices; disini saya memilih Chrome.

Maka akan terbuka jendela Chrome baru dengan nama Flutter Demo.

Kita bisa klik tombol (+) di pojok kanan bawahnya untuk menguji apakah aplikasi flutter kita berjalan dengan benar.

Yup!
Aplikasi flutter saya sudah berjalan dengan benar. 😁

Saya melakukan 2 kali klik pada tombol (+), dan di teks tengahnya muncul angka 2;
dan akan bertambah sejumlah saya melakukan klik pada tombol (+) nya.

Penutup

Nah sobats... Sekian dulu artikel kali ini tentang Cara Install Flutter untuk Project membuat Mobile Apps dengan Flutter.

Jika ada yang ingin ditanyakan jangan sungkan untuk komen di bawah ya...

Sampai jumpa di kelanjutan project ini pada artikel berikutnya. 😁