Widget HTML #1

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

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

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.
Download Git for Windows Cara Install Flutter

Maka akan tampil teks berikut jika installasi Git tadi berhasil.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter (Bagian 1)



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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter



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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Muncul jendela popup, klik Environment Variables.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Pada jendela Environment Variables, pilih Path pada bagian User variables, klik Edit...
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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

Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Di komputer saya lokasinya di:
C:\src\flutter\bin

Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Ketikkan perintah:
flutter
Tekan Enter.

Jika pengaturan yang kita lakukan sudah benar, maka akan muncul tampilan berikut:
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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:
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Pilih "Do not import settings", klik OK.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Klik Next.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Pilih setup yang Standard, klik Next.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Klik Next lagi...
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Klik pada bagian Licenses android-sdk-license, klik Accept.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Klik juga pada bagian Licenses intel-android-extra-license, klik Accept juga, lalu klik Finish.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Sekarang Android Studio akan download beberapa file yang kita butuhkan.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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

Setelah selesai klik Finish.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Selanjutnya kita cek lagi progress installasinya dengan perintah:
flutter doctor

Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Pilih tab SDK Tools, centang bagian Android SDK Command-line Tools (latest);
Klik Apply.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Muncul jendela konfirmasi, Klik OK.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Tunggu proses download hingga selesai... klik Finish.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Lanjut klik Apply, lalu klik OK.

Sekarang kita cek lagi progress installasinya dengan perintah:
flutter doctor
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Tekan Enter.

Akan muncul terms dari Android License Agreement, untuk melanjutkannya kita ketikkan saja:
y
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Lalu tekan Enter.

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

Lanjutkan sampai muncul pesan "All SDK Package licenses accepted".
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.
Cara Install Visual Studio Code

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

Tunggu sampai prosesnya selesai... klik Finish.
Cara Install Visual Studio Code

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

Ketikkan:
flutter

Pilih Flutter yang dari Dart Code, dan klik Install.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Tunggu hingga Flutter Extension selesai diinstall.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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...
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Kettikkan:
flutter

Pilih Flutter: New Project
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Pilih Application
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Pilih folder tempat kita ingin menyimpan project flutter kita.
Lalu klik Select a folder to create the project in
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Beri nama sesuai keinginan kita... dan klik Enter.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

Muncul jendela popup, centang Trust the authors... lalu klik tombol "Yes, I trust the authors".
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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

dan... Project Apps 1 Flutter kita sudah ready.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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.
Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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.

Cara Install Flutter - Membuat Mobile Apps dengan Flutter

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. 😁


Posting Komentar untuk "Cara Install Flutter - Membuat Mobile Apps dengan Flutter (Bagian 1)"