Halo teman-teman! Sebelum kita bahas tutorial kali ini, mungkin ada dari kamu yang sempat membaca artikelku sebelumnya di Medium tentang cara buat project Flutter di Firebase Studio di sini 👇.

Nah, kalau sebelumnya kita pakai Firebase Studio, kali ini aku mau berbagi cara lain yang nggak kalah seru, yaitu menggunakan GitHub Codespaces!

Pernahkah kamu ingin mencoba Flutter tetapi terkendala dengan spesifikasi laptop atau malas melakukan instalasi SDK yang rumit di lokal? GitHub Codespaces adalah solusinya. Dengan Codespaces, kamu bisa memiliki IDE berbasis cloud yang siap pakai dalam hitungan detik.

Dalam artikel ini, kita akan membahas langkah-langkah membuat project Flutter dari nol langsung di browser kamu menggunakan GitHub Codespaces. Yuk, simak tutorialnya, teman-teman!

Apa itu GitHub Codespaces?

Sebelum kita masuk ke tutorialnya, mungkin teman-teman ada yang bertanya: apa sih sebenarnya GitHub Codespaces itu?

Singkatnya, GitHub Codespaces adalah lingkungan pengembangan (development environment) yang berjalan sepenuhnya di cloud. Bayangkan kamu memiliki VS Code yang sangat powerful, tetapi bukannya berjalan di laptopmu, ia berjalan di server milik GitHub.

Beberapa keuntungan menggunakan Codespaces antara lain:

• Akses dari Mana Saja: Selama ada browser dan internet, kamu bisa ngoding.
• Tidak Membebani RAM: Karena proses kompilasi dilakukan di cloud, laptop kentang pun jadi terasa kencang.
• Siap Pakai: Kamu bisa mengonfigurasi environment agar setiap kali dibuka, semua tools (seperti Flutter SDK) sudah otomatis terpasang.

⚠️ Catatan Penting: Kebijakan Penghapusan

Perlu ingat ya teman-teman, GitHub Codespace ini tidak bersifat permanen selamanya jika tidak digunakan. Jika Codespace kamu tidak aktif selama 30 hari, GitHub akan menghapusnya secara otomatis untuk menghemat ruang penyimpanan server. Jadi, pastikan kamu selalu melakukan commit dan push kode kamu ke repositori GitHub agar hasil kerjamu tetap aman!

Sekarang, mari kita mulai praktiknya!

Langkah 1: Mempersiapkan Lingkungan Codespace

Pertama, kita perlu membuka "kontainer" kerja kita di cloud.

Kunjungi GitHub Codespaces. Lalu, Cari item bertuliskan Blank (Template Kosong).

Klik tombol "Use this template". Tunggu beberapa saat hingga tab baru terbuka dan menampilkan editor VS Code versi web di browser kamu.

Langkah 2: Instalasi Ekstensi yang Dibutuhkan

Agar VS Code mengenali bahasa Flutter dan Dart, teman-teman perlu memasang ekstensinya:

Buka menu Extensions di sidebar kiri (atau tekan Ctrl+Shift+X). Cari dan instal ekstensi Flutter. (Ekstensi Dart biasanya akan terinstal secara otomatis sebagai dependensi).

Langkah 3: Mengunduh Flutter SDK

Karena kita menggunakan template kosong, Flutter SDK belum tersedia secara default.

Gunakan shortcut CMD + SHIFT + P (Mac) atau CTRL + SHIFT + P (Windows/Linux) untuk membuka Command Palette. Ketik dan pilih: "Flutter: New Project".

Akan muncul notifikasi yang memberitahu bahwa SDK tidak ditemukan. Klik Download SDK.

Arahkan ke path atau direktori yang disarankan oleh sistem. Jika sudah, klik tombol Clone Flutter.

Tunggu proses pengunduhan dan instalasi Flutter SDK hingga selesai. Jika muncul saran untuk menambahkan Flutter SDK ke PATH variable, klik setuju atau ikuti instruksinya agar perintah Flutter bisa kamu jalankan dari terminal mana saja.

Langkah 4: Membuat Project Flutter Baru

Setelah SDK siap, saatnya kita membuat aplikasi pertama.

Gunakan kembali shortcut CMD + SHIFT + P (atau CTRL + SHIFT + P). Ketik dan pilih kembali: "Flutter: New Project". Pilih tipe project Empty Project (atau Application jika teman-teman ingin kode boilerplate lengkap).

Pilih direktori penyimpanan yang sudah disediakan di Codespace kamu.

Berikan nama untuk project kamu, misalnya: `flutter_counter_app`.

Tekan Enter dan tunggu hingga struktur folder project Flutter selesai dibuat.

Langkah 5: Menjalankan Aplikasi (Flutter Web)

Setelah project siap, kamu bisa langsung melihat hasilnya.

Buka menu Run di bagian atas, lalu klik Start Debugging.

Perhatikan pane Debug Console di bagian bawah. Tunggu hingga proses kompilasi selesai. Cari informasi mengenai port yang sedang aktif. Kalau yang ada di gambar ini adalah port 38647.

Buka pane Ports (biasanya di sebelah terminal). Fokus pada port yang aktif pada langkah sebelumnya.

Klik ikon globe (🌐) atau tautan pada port yang aktif tersebut. Voila! Tab baru akan terbuka dan kamu bisa melihat aplikasi Flutter Web berjalan dengan lancar.

Kesimpulan

Ngoding Flutter kini tidak lagi terbatas oleh perangkat keras. Dengan GitHub Codespaces, kamu bisa melakukan development di mana saja, kapan saja, hanya dengan modal browser dan koneksi internet. Selamat mencoba, teman-teman!