Tutorial Dasar Flutter: Setup Lingkungan, Buat Project, dan Jalankan Hello World

 Dalam mempelajari pengembangan aplikasi mobile lintas platform, Flutter menjadi salah satu framework yang paling populer karena kemampuannya menghasilkan aplikasi Android, iOS, Web, dan Desktop dari satu basis kode. Sebelum mulai menulis kode, penting untuk memahami proses instalasi Flutter SDK serta langkah awal menyiapkan proyek pertama.

Agar proses belajar lebih terarah, dibuat rangkuman langkah dasar mulai dari mengikuti dokumentasi resmi Flutter, instalasi SDK, hingga menjalankan aplikasi Hello World sederhana. Panduan ini cocok untuk pemula yang ingin mulai menggunakan Flutter di Windows.



Step 1 - Membaca Dokumentasi Resmi Flutter

Sebelum melakukan instalasi, sangat disarankan untuk membaca panduan resmi Flutter agar memahami struktur instalasi, kebutuhan sistem, dan langkah konfigurasi dasar.



Pada halaman dokumentasi Flutter, terdapat bagian Install Flutter yang menjelaskan proses instalasi sesuai platform yang digunakan (Windows, macOS, atau Linux). Dokumentasi ini juga menyediakan panduan lengkap mulai dari mengunduh SDK, menyiapkan folder penyimpanan, hingga menambahkan Flutter ke PATH.

Pada bagian instalasi manual untuk Windows, dokumentasi menjelaskan bahwa instalasi Flutter dimulai dengan:

  1. Mengunduh bundle Flutter SDK versi terbaru dalam format ZIP.

  2. Mengekstrak hasil unduhan ke folder yang disarankan, misalnya
    C:\Users\username\develop

Dokumentasi juga memberikan catatan agar tidak menempatkan Flutter di folder yang mengandung spasi atau karakter khusus untuk menghindari error saat menjalankan Flutter di terminal.

Setelah memahami struktur instalasinya melalui dokumentasi resmi, barulah proses instalasi Flutter dapat dilakukan pada langkah berikutnya.

Step 2 — Mengunduh dan Mengekstrak Flutter SDK

Setelah memahami alur instalasi melalui dokumentasi resmi, langkah berikutnya adalah mengunduh Flutter SDK dan mengekstraknya ke folder yang akan digunakan sebagai direktori instalasi.


Berikut prosesnya:

  1. Unduh file Flutter SDK
    Dari halaman dokumentasi Flutter, unduh file ZIP Flutter untuk Windows. File ini berukuran cukup besar karena berisi seluruh komponen SDK yang dibutuhkan.

  2. Buka folder hasil unduhan
    Setelah proses download selesai, masuk ke folder Downloads tempat file berada.

  3. Ekstrak file ZIP
    Klik kanan pada file ZIP Flutter kemudian pilih Extract All… untuk mengekstraknya.
    Proses ekstraksi memakan waktu beberapa menit tergantung kecepatan perangkat.

  4. Tentukan lokasi penyimpanan SDK
    Dokumentasi Flutter menyarankan agar folder SDK disimpan di direktori tanpa spasi dan karakter khusus.
    Misalnya:

    C:\Users\username\develop\

    Setelah ekstraksi selesai, pindahkan folder flutter ke direktori tersebut.

Dengan langkah ini, Flutter SDK sudah tersedia di perangkat dan siap untuk dikonfigurasi pada langkah berikutnya.


Step 3 — Memverifikasi Instalasi Flutter

Setelah Flutter SDK berhasil diekstrak dan dipindahkan ke direktori yang sesuai, langkah berikutnya adalah memastikan bahwa Flutter sudah terpasang dengan benar dan dapat dijalankan melalui terminal.


Berikut prosesnya:

  1. Buka VS Code atau Terminal Windows
    Kamu bisa menggunakan PowerShell, CMD, atau terminal bawaan VS Code seperti pada gambar.

  2. Jalankan perintah untuk mengecek versi Flutter:

    flutter --version

  3. Tunggu proses validasi dan instalasi dependency awal
    Flutter akan membangun tool internal, melakukan pub upgrade, serta mengunduh dependency yang dibutuhkan untuk pertama kali.

  4. Pastikan output menampilkan informasi versi Flutter
    Jika instalasi berhasil, terminal akan menampilkan informasi seperti versi Flutter, channel yang digunakan, informasi Dart SDK, serta platform yang didukung.

  5. Tanda bahwa SDK siap dipakai
    Jika muncul pesan seperti:

    Got dependencies.

    berarti Flutter telah siap digunakan untuk membuat proyek.


Step 4 — Membuat Proyek Flutter Baru

Setelah memastikan Flutter sudah terpasang dengan benar, tahap berikutnya adalah membuat proyek Flutter pertama sebagai dasar untuk menampilkan HelloWorld.



Berikut prosesnya:

  1. Buka terminal di direktori tempat kamu ingin menyimpan proyek Flutter.
    Pada contoh gambar, terminal berada di folder PBP_Projects.

  2. Jalankan perintah untuk membuat proyek baru:

    flutter create project_flutter

  3. Tunggu proses pembuatan proyek
    Flutter akan:

    • mengunduh dependency awal,

    • membuat struktur folder lengkap,

    • menghasilkan file utama seperti main.dart.

    Jika berhasil, akan muncul pesan:

    All done!
Your application code is in project_flutter\lib\main.dart.

  4. Masuk ke folder proyek dengan perintah:

    cd project_flutter

Dengan langkah ini, proyek Flutter pertama sudah berhasil dibuat dan siap untuk dijalankan atau diedit lebih lanjut pada tahap berikutnya.

Step 5 — Menginstal Ekstensi Dart di Visual Studio Code

Agar proses pengembangan Flutter berjalan nyaman, Visual Studio Code perlu dilengkapi ekstensi Dart. Ekstensi ini menyediakan fitur penting seperti autocompletion, debugging, linting, serta integrasi langsung dengan Flutter SDK.



Berikut langkah yang dilakukan pada tahap ini:

  1. Buka Visual Studio Code, lalu masuk ke Extensions Marketplace dengan menekan tombol Ctrl+Shift+X.

  2. Ketik “Dart” pada kolom pencarian ekstensi.

  3. Pilih ekstensi Dart yang diterbitkan oleh Dart Code (ikon warna biru seperti pada gambar).

  4. Klik Install untuk memulai pemasangan.

  5. Tunggu proses instalasi hingga selesai.
    Setelah terpasang, VS Code akan otomatis mendeteksi proyek Flutter dan mengaktifkan fitur-fitur pendukung bahasa Dart.

Tahap ini memastikan lingkungan pengembangan siap digunakan untuk menjalankan aplikasi Flutter dengan lancar pada langkah selanjutnya.


Step 6 — Membuka dan Mengenal Struktur Proyek Flutter

Setelah proyek Flutter berhasil dibuat, langkah berikutnya adalah membuka folder proyek dan memahami struktur dasar yang akan digunakan untuk menampilkan Hello World.


Berikut garis besar tahapannya:

  1. Buka folder proyek di VS Code
    Arahkan terminal ke direktori proyek dengan perintah:

    cd project_flutter

  2. Periksa file utama aplikasi
    Flutter secara otomatis membuat file utama bernama main.dart, yang terletak di:

    lib/main.dart

    File inilah yang akan dijalankan pertama kali ketika aplikasi dibuka.

  3. Lihat struktur project yang muncul di sidebar VS Code
    Beberapa folder penting yang akan terlihat antara lain:

    • lib berisi kode aplikasi Dart (yang akan sering digunakan)

    • android dan ios untuk konfigurasi aplikasi di platform masing masing

    • web, macos, windows, dan linux untuk platform tambahan

    • pubspec.yaml untuk mengatur dependencies dan asset aplikasi

  4. Pastikan perangkat pengujian terdeteksi
    Jalankan perintah:

    flutter devices

    Jika konfigurasi benar, akan muncul daftar device seperti:

    • emulator Android (misalnya Pixel API 36)

    • Chrome untuk Flutter Web

    • Windows Desktop

    • Edge

    Hasil yang muncul menunjukkan bahwa lingkungan Flutter sudah siap menjalankan aplikasi pada berbagai perangkat.


Step 7 — Menjalankan Aplikasi Hello World (final)



  1. Pastikan emulator atau perangkat fisik aktif dan terdeteksi

    • Lihat daftar device dengan perintah:

      flutter devices

    • Jika ingin melihat emulator yang tersedia dan memulai salah satu, jalankan:

      flutter emulators
flutter emulators --launch <emulatorId>

    • Catatan: pada contoh sebelumnya emulator Pixel API 36 muncul sebagai emulator-5554 atau nama serupa.

  2. Jalankan aplikasi pada device yang dipilih

    • Dari folder proyek, jalankan:

      cd project_flutter
flutter run

    • Untuk menjalankan pada device tertentu gunakan opsi -d:

      flutter run -d emulator-5554

  3. Tunggu proses build dan instalasi

    • Gradle dan dependency akan diunduh bila perlu. Setelah build selesai, aplikasi otomatis akan terinstall dan diluncurkan ke emulator.

    • Pada tampilan emulator akan muncul halaman sederhana berisi teks Hello world! sesuai kode di lib/main.dart.

  4. Interaksi pengembangan cepat

    • Gunakan hot reload untuk melihat perubahan UI tanpa memulai ulang aplikasi sepenuhnya: tekan r di terminal yang menjalankan flutter run.

    • Untuk full restart tekan R.

    • Untuk menghentikan aplikasi tekan Ctrl+C di terminal.

  5. Troubleshooting singkat jika gagal berjalan

    • Jalankan flutter doctor untuk melihat masalah konfigurasi.

    • Pastikan Android SDK, platform tools, dan license sudah diterima:

      flutter doctor --android-licenses

    • Jika device tidak terdeteksi, cek ADB: adb devices.

    • Jika build error berhubungan NDK/SDK, pastikan path SDK sudah benar dan komponen yang diperlukan terinstal lewat SDK Manager.

  6. Opsi lanjutan (jika ingin)

    • Jalankan untuk web:

      flutter run -d chrome

    • Buat build release Android:

      flutter build apk --release

Pada tahap awal mempelajari Flutter, memahami proses instalasi SDK, menyiapkan editor, membuat proyek baru, hingga menjalankan aplikasi Hello World merupakan fondasi yang sangat penting. Melalui langkah langkah ini, lingkungan pengembangan sudah tersusun dengan benar dan alur kerja dasar Flutter mulai terasa lebih jelas.

Setelah aplikasi pertama berhasil dijalankan di emulator, proses belajar dapat berlanjut ke materi yang lebih dalam seperti pengenalan widget, state management, routing, dan integrasi dengan layanan eksternal. Fondasi yang solid di awal akan mempermudah eksplorasi fitur fitur lanjutan Flutter ke depannya.

Dengan lingkungan yang sudah siap digunakan, langkah selanjutnya tinggal berkreasi dan membangun tampilan serta fungsi aplikasi sesuai kebutuhan pengembangan.


Comments

Post a Comment

Popular posts from this blog

Memulai Mobile Programming: Instalasi Android Studio dan Hello World

Image
Dalam tahap awal mempelajari Mobile Programming, penting untuk memahami proses instalasi Android Studio serta pembuatan proyek dasar sebagai fondasi pengembangan aplikasi. Untuk mendokumentasikan tahapan tersebut dan mempermudah proses belajar, dibuatlah rangkuman terstruktur yang menjelaskan langkah langkah dasarnya. Panduan singkat ini membahas instalasi Android Studio, penyiapan emulator, dan pembuatan proyek “Hello World” menggunakan Kotlin. Materi awal ini menjadi dasar sebelum memasuki pembahasan pemrograman Android yang lebih mendalam. Step 1 — Download Android Studio     Buka halaman resmi: developer.android.com/studio. Klik tombol “Download Android Studio” (tombol besar pada halaman). Pilih paket sesuai OS (Windows/macOS/Linux) dan setujui lisensi lalu unduh file installer. Catatan: Android Studio sudah menyertakan OpenJDK sehingga tidak perlu menginstal JDK terpisah pada versi modern. Step 2 - Instal Android Studio Jalankan file installer yang sudah di...
Read more

Belajar Xcode dari Nol: Instalasi, Setup, dan Membuat Project Hello World

Image
 Xcode adalah IDE resmi buatan Apple yang digunakan untuk mengembangkan aplikasi iOS, iPadOS, macOS, watchOS, dan tvOS. Semua tool penting seperti editor kode, Interface Builder, simulator perangkat, sampai debugging tools sudah terintegrasi di dalamnya, sehingga pengembang dapat membangun aplikasi Apple secara native dengan lebih mudah. Sebelum membuat aplikasi sederhana seperti HelloWorld, langkah pertama adalah memastikan Xcode sudah terpasang di perangkat macOS. Proses instalasinya dilakukan melalui App Store dan membutuhkan koneksi internet yang stabil karena ukuran file Xcode cukup besar. Pada tahap awal ini, kita akan melihat cara mendapatkan Xcode langsung dari sumber resmi agar lingkungan pengembangan siap digunakan. Step 1 — Download dan Instal Xcode dari App Store Sebelum membuat project baru, instal Xcode terlebih dahulu melalui App Store. Caranya sangat sederhana dan merupakan metode resmi dari Apple. Langkahnya sebagai berikut: Buka App Store di macOS. Pada kol...
Read more

Instalasi Kotlin Multiplatform Mobile dan Cara Membuat HelloWorld Pertama

Image
 Kotlin Multiplatform Mobile (KMM) adalah teknologi yang memungkinkan pengembang membangun aplikasi Android dan iOS menggunakan satu basis kode yang sama. Konsep ini sangat membantu ketika ingin mengembangkan aplikasi lintas platform tanpa harus membuat logika program dua kali. Untuk memulai perjalanan memahami KMM, langkah pertama yang perlu dilakukan adalah menyiapkan lingkungan pengembangan di Android Studio dan memastikan plugin KMM sudah aktif agar fitur yang dibutuhkan dapat digunakan. Bagian ini akan membahas proses awal persiapan lingkungan, dimulai dari mengakses dokumentasi resmi hingga memastikan plugin Kotlin Multiplatform terpasang dengan benar. Step 1 – Membaca Dokumentasi dan Menyiapkan Plugin KMM Sebelum membuat project KMM, penting untuk melihat panduan resmi terlebih dahulu. Dokumentasi Kotlin Multiplatform memberikan penjelasan dasar tentang cara kerja KMM serta langkah konfigurasi yang perlu disiapkan. Setelah memahami gambaran dari dokumentasi, buka Android St...
Read more