Pengenalan dan Pemasangan

Flutter adalah kerangka kerja (framework) buatan Google, berbasis bahasa pemrograman milik Google sendiri yaitu Dart. Dengan satu set kode yang sama, kamu bisa membuat aplikasi web, iOS, Android, Linux, Windows bahkan aplikasi perangkat tertanam. Framework sejenis lainnya adalah MAUI milik Microsoft dan NativePHP untuk PHP.

Flutter bersifat sumber terbuka (open source), digunakan untuk membangun aplikasi multi-platform berdesain menarik yang dikompilasi secara native dari satu basis kode. Saat ini banyak pemrogram memakainya untuk membuat aplikasi Android.

Flutter menghasilkan kode asli, sehingga program yang dikembangkan dengannya sulit dilakukan rekayasa balik. Flutter mengkompilasi menjadi kode mesin ARM atau Intel serta JavaScript untuk menghadirkan performa cepat di semua perangkat.

Mendukung pembuatan aplikasi seluler, web, desktop dan perangkat tertanam.

Google telah mengintegrasikan layanan miliknya ke dalam Flutter, kamu bisa gunakan dengan lancar tanpa hambatan

Terkoneksi dengan ekosistem pengembangan aplikasi Google. Melalui integrasi mulus bersama Firebase, Google Ads, Google Play, Google Pay, Google Wallet, Google Maps dan layanan lainnya, mempermudah alur pengembangan serta menjangkau audiens yang lebih luas.

Flutter menggunakan bahasa Dart, bahasa yang dioptimalkan untuk aplikasi cepat di semua platform.

Berikut situs resmi Flutter: Flutter – Bangun aplikasi untuk layar apa pun

Pemasangan

Flutter dapat dijalankan di berbagai platform, semua sistem operasi di bawah ini mendukung pengembangan dengan Flutter.

Kursus ini menggunakan sistem operasi Windows.

Untuk memasang lingkungan pengembangan Flutter, kamu perlu memasang beberapa aplikasi prasyarat terlebih dahulu.

Pasang Git versi Windows

Pembaca bisa unduh dan pasang dari situs resmi Git: Git – Install for Windows

Komputer penulis berarsitektur Intel 64-bit, jadi pasang versi ini: Git for Windows/x64 Setup.

Pemasangan Git cukup mudah, hampir sama dengan program umum lainnya. Cukup pilih «Next» di setiap langkah secara berurutan.

Unduh dan pasang Visual Studio Code

Flutter mendukung VS Code dan juga Android Studio, pembaca bisa pilih alat pengembangan sesuai kebiasaan masing-masing. Penulis sendiri terbiasa pakai Android Studio, jadi kursus ini berbasis Android Studio. Pembaca bisa unduh versi terbaru dari situs resmi Android Studio: https://developer.android.com/studio

Pemasangan Flutter

Di atas baru memasang aplikasi prasyarat yang dibutuhkan, sekarang saatnya memasang Flutter itu sendiri. Flutter adalah sebuah framework, kamu harus memasangnya terlebih dahulu sebelum bisa mengembangkan dengannya. Jika kamu pakai VS Code untuk coding, silakan lihat kursus lain, VS Code sudah menyediakan fitur pemasangan Flutter secara langsung, kamu bisa pasang Flutter melalui VS Code.

Pemasangan Flutter dan Dart di VS Code hampir sama dengan pasang ekstensi VS Code lainnya, cari Flutter dan Dart di panel ekstensi.

Untuk menambahkan ekstensi Dart dan Flutter di VS Code, kunjungi halaman ekstensi Flutter di Marketplace lalu klik Pasang. Jika browser meminta izin, izinkan membuka VS Code. Bisa lihat panduan resmi: Siapkan dan coba Flutter

Namun karena penulis kursus ini tidak menggunakan VS Code, kita akan lakukan pemasangan manual.

Pemasangan Manual Flutter

Pemasangan manual merujuk pada artikel resmi berikut: https://docs.flutter.dev/install/manual

Buka tautan di atas lalu pilih versi yang sesuai dengan sistemmu, penulis pakai Windows.

Kemudian klik tombol unduh untuk mengambil berkas arsip.

Setelah selesai unduh, ekstrak arsip ke folder yang jalur filenya tidak mengandung spasi atau karakter khusus, disarankan gunakan jalur sederhana seperti C:\flutter

Isi folder terlihat seperti ini:

Selanjutnya salin jalur folder bin: C:\flutter\bin, lalu tambahkan ke variabel lingkungan Path.

Di menu Mulai, cari «variabel lingkungan».

Lalu tambahkan jalur folder bin ke Path.

Pemasangan Dart

Setelah memasang Flutter, kamu juga perlu memasang Dart. Buka terminal lalu jalankan perintah berikut:

flutter doctor

Saat perintah dijalankan, SDK Dart akan terunduh secara otomatis.

C:\Users\Jack>flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...Code language: JavaScript (javascript)

Kemudian verifikasi apakah pemasangan berhasil. Buka terminal CMD dan jalankan perintah di bawah.

Catatan: di beberapa negara proses unduh bisa gagal, perlu atur mirror atau proxy. Buka CMD/PowerShell lalu jalankan perintah berikut secara berurutan:

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctorCode language: JavaScript (javascript)

Perintah terakhir yaitu flutter doctor berfungsi untuk memeriksa seluruh lingkungan Flutter. Kata doctor berarti dokter, fungsinya layaknya pemeriksaan lengkap instalasi Flutter milikmu.

Contoh hasil pemeriksaan milik penulis:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [ 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT LTSC 64 bit, 21H2, 2009)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/windows-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (2 available)
[!] Network resources
    X An HTTP error occurred while checking "https://github.com/": batas waktu koneksi habis

! Doctor found issues in 3 kategori.Code language: JavaScript (javascript)

Tanda X berarti komponen belum terpasang dengan benar. Contohnya, jika Android toolchain belum terpasang, tidak bisa kompilasi aplikasi versi Android; jika Chrome tidak ada, tidak bisa debug versi web. Di langkah selanjutnya kita pasang Android Studio. Untuk Chrome, kamu bisa unduh dan pasang sendiri. Jika hanya membuat aplikasi desktop Windows, dua komponen ini tidak wajib dipasang.

Android SDK tidak ditemukan (tidak bisa kompilasi untuk Android)

Chrome tidak terdeteksi (tidak bisa jalankan versi web)

Tautan unduh Chrome: Google Chrome – Unduh peramban cepat dan aman dari Google

Pemasangan Android Studio

Versi terbaru yang penulis unduh adalah android-studio-quail1-patch1-windows.exe, cukup klik dua kali untuk mulai pasang.

Sekali lagi, cukup pilih «Next» di setiap langkah instalasi.

Setelah terpasang, saat buka program juga cukup klik «Next» terus.

Setelah instalasi selesai, kamu sudah bisa buat proyek menggunakan Android Studio.

Sekarang buka CMD lagi dan jalankan flutter doctor untuk cek ulang lingkungan.

[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
    X cmdline-tools component is missing.
      Try installing or updating Android Studio.
      Alternatively, download the tools from https://developer.android.com/studio#command-line-tools-only and make sure
      to set the ANDROID_HOME environment variable.
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/windows-android-setup for more details.Code language: PHP (php)

Buka Android Studio → File → Settings → Appearance & Behavior → System Settings → Android SDK

Pindah ke tab SDK Tools lalu centang:

Android SDK Command-line Tools (latest)

Kemudian klik Apply dan tunggu proses unduh serta pemasangan selesai.

Jalankan kembali perintah flutter doctor

[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licensesCode language: CSS (css)

Masalah ini terjadi karena lisensi Android belum diterima.

Lisensi Android belum diterima (Some Android licenses not accepted)

Jalankan perintah berikut di CMD:

flutter doctor --android-licenses

Kemudian ketik y untuk semua pertanyaan guna menyetujui lisensi.

Lalu jalankan kembali flutter doctor di terminal.

C:\Users\Jack>flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [versi 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT Enterprise LTSC 64 bit, 21H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (3 available)
[√] Network resources

• No issues found!Code language: JavaScript (javascript)

Baik, sampai sini pemasangan dasar Flutter sudah selesai. Di pelajaran berikutnya kita akan membuat proyek contoh pertama kita.