[🧑‍💻] Belajar - Dasar Pengembangan Aplikasi Flutter 14/44: Penyiapan Lingkungan Flutter, Widget Inti, Sintaks Dasar Dart

✨ Ringkasan Gemini 2.5 Pro 　

Kursus dasar pengembangan aplikasi Flutter

DevStory - Inflearn DevStory

Tidak apa-apa walau belum punya pengetahuan pengembangan! Dasar pengembangan aplikasi Flutter yang bisa diikuti pemula 🏃‍♂️Dasar pengembangan aplikasi Flutter yang bahkan bisa dipelajari pemula total[foto]Kalau belajar pengembangan aplikasi, kamu bisa merilis layanan aplikasimu sendiri, yang selama ini hanya kamu bayangkan, ke seluruh dunia. Sebenarnya

• Asli: http://blog.naver.com/hyeogikarp/223882864462
• Waktu publikasi Naver: 2025/05/30 11:30 KST
• Kategori asli: Belajar Pengembangan

Asli

Kursus Dasar Pengembangan Aplikasi Flutter

DevStory - Inflearn

DevStory

Tidak apa-apa walau belum punya pengetahuan pengembangan! Dasar pengembangan aplikasi Flutter yang bisa diikuti pemula 🏃‍♂️Dasar pengembangan aplikasi Flutter yang bahkan bisa dipelajari pemula total[foto]Kalau belajar pengembangan aplikasi, kamu bisa merilis layanan aplikasimu sendiri, yang selama ini hanya kamu bayangkan, ke seluruh dunia. Sebenarnya membuat aplikasi

www.inflearn.com

1. Apa itu Flutter?

• Framework lintas platform: Dikembangkan oleh Google, dan memungkinkan pengembangan aplikasi Android, iOS, Web, dan Desktop dengan satu basis kode.

• Menggunakan bahasa Dart: UI ditulis dalam bentuk kode.

1. Konsep inti: Semuanya adalah Widget

• Unit penyusun UI: Layar disusun dengan merangkai widget.

• Widget Tree: Struktur hierarkis widget yang tersusun dalam hubungan induk-anak.

• Key? key dan super(key: key): Dalam konstruktor widget, Key digunakan untuk mempertahankan state widget dan memperbaruinya secara efisien saat widget tree disusun ulang. Pada tahap sekarang, cukup pahami bahwa konsep seperti ini ada.

• BuildContext context: Objek penting yang menunjukkan posisi widget saat ini di dalam widget tree, sekaligus memungkinkan akses ke data atau tema dari widget di atasnya. Dipakai di berbagai tempat, misalnya Navigator.pop(context).

• Kategori widget utama:

• StatelessWidget: Widget statis yang tidak memiliki state.

• StatefulWidget: Widget dinamis yang dapat digambar ulang sesuai perubahan state. (contoh kode dihilangkan)

• StatefulWidget: Widget dinamis yang dapat digambar ulang sesuai perubahan state. (contoh kode dihilangkan)

1. Struktur dasar aplikasi dan widget utama

• Fungsi main() & runApp() & MaterialApp & Scaffold:

• home pada MaterialApp: Menentukan layar pertama aplikasi. (Contoh: home: HomePage())

• home pada MaterialApp: Menentukan layar pertama aplikasi. (Contoh: home: HomePage())

• Properti detail AppBar:

• Widget layout:

• Column & Row:

• Padding: Menambahkan ruang kosong di sekitar widget anak.

• Padding: Menambahkan ruang kosong di sekitar widget anak.

• Container: Widget berbentuk persegi panjang yang bisa diberi berbagai styling(ukuran, warna, margin, border, dan sebagainya).

• Container: Widget berbentuk persegi panjang yang bisa diberi berbagai styling(ukuran, warna, margin, border, dan sebagainya).

• Expanded: Memperluas widget anak dari Row atau Column agar mengisi ruang yang tersisa.

• Expanded: Memperluas widget anak dari Row atau Column agar mengisi ruang yang tersisa.

• SingleChildScrollView: Membuat konten widget anak bisa di-scroll saat keluar dari layar.

• SingleChildScrollView: Membuat konten widget anak bisa di-scroll saat keluar dari layar.

• ListView.builder: Membuat daftar scrollable yang menampilkan banyak item secara efisien. Hanya item yang terlihat di layar yang dibuat.

• ListView.builder: Membuat daftar scrollable yang menampilkan banyak item secara efisien. Hanya item yang terlihat di layar yang dibuat.

• Stack: Memungkinkan widget ditempatkan saling bertumpuk(sumbu Z).

• Stack: Memungkinkan widget ditempatkan saling bertumpuk(sumbu Z).

• AspectRatio: Mengunci rasio lebar dan tinggi widget anak.

• AspectRatio: Mengunci rasio lebar dan tinggi widget anak.

• double.infinity: Digunakan pada properti width atau height milik Container dan sejenisnya, agar mengisi ukuran maksimum yang diizinkan oleh widget induk.

• double.infinity: Digunakan pada properti width atau height milik Container dan sejenisnya, agar mengisi ukuran maksimum yang diizinkan oleh widget induk.

• SizedBox: Digunakan untuk membuat ruang kosong dengan ukuran tertentu, atau menetapkan ukuran widget anak secara eksplisit.

• SizedBox: Digunakan untuk membuat ruang kosong dengan ukuran tertentu, atau menetapkan ukuran widget anak secara eksplisit.

• Widget UI dasar:

• Text & TextStyle: Menampilkan teks dan menentukan stylenya.

• Image.network: Memuat dan menampilkan gambar dari URL jaringan.

• Image.network: Memuat dan menampilkan gambar dari URL jaringan.

• fit: BoxFit.cover: Membuat gambar memenuhi ruang yang ditentukan sambil mempertahankan rasionya. (Jika gambar lebih besar daripada ruangnya, gambar bisa terpotong)Icon: Menampilkan ikon Material Design.

• fit: BoxFit.cover: Membuat gambar memenuhi ruang yang ditentukan sambil mempertahankan rasionya. (Jika gambar lebih besar daripada ruangnya, gambar bisa terpotong)

• fit: BoxFit.cover: Membuat gambar memenuhi ruang yang ditentukan sambil mempertahankan rasionya. (Jika gambar lebih besar daripada ruangnya, gambar bisa terpotong)

• Icon: Menampilkan ikon Material Design.

• Detail TextField & InputDecoration: Menerima input teks dari pengguna.

• Detail TextField & InputDecoration: Menerima input teks dari pengguna.

• ElevatedButton, TextButton, IconButton: Berbagai jenis widget tombol.

• ElevatedButton, TextButton, IconButton: Berbagai jenis widget tombol.

• Card: Membuat UI berbentuk kartu Material Design. Memiliki sedikit bayangan dan sudut membulat.

• Card: Membuat UI berbentuk kartu Material Design. Memiliki sedikit bayangan dan sudut membulat.

• Divider: Membuat garis pemisah visual.

• Divider: Membuat garis pemisah visual.

• CircleAvatar: Terutama digunakan untuk menampilkan gambar berbentuk lingkaran, seperti foto profil pengguna.

• CircleAvatar: Terutama digunakan untuk menampilkan gambar berbentuk lingkaran, seperti foto profil pengguna.

• Colors.black.withOpacity(0.5): Menerapkan transparansi pada warna. 0.0 (sepenuhnya transparan) ~ 1.0 (sepenuhnya buram).

• Colors.black.withOpacity(0.5): Menerapkan transparansi pada warna. 0.0 (sepenuhnya transparan) ~ 1.0 (sepenuhnya buram).

• Drawer dan widget terkait:

• Drawer: Ditentukan pada properti drawer milik Scaffold, berupa panel yang meluncur keluar dari salah satu sisi layar.

• DrawerHeader: Widget yang digunakan untuk menghias area atas Drawer.

• ListTile: Sering digunakan untuk menyusun tiap item di dalam Drawer. Memiliki properti seperti leading, title, trailing, onTap, dan sebagainya.

• ListTile: Sering digunakan untuk menyusun tiap item di dalam Drawer. Memiliki properti seperti leading, title, trailing, onTap, dan sebagainya.

• PageView: Widget yang memungkinkan beberapa halaman(layar) dilihat dengan scroll ke kiri dan kanan. (Contoh: banner acara)

1. Dasar navigasi

• Navigator.pop(context): Digunakan untuk menghapus layar(route) saat ini dari stack dan kembali ke layar sebelumnya. Berguna saat menutup Drawer atau dialog.

1. Menangani data(contoh sederhana)

• List<Map<String, dynamic»: Menyusun data yang akan digunakan di ListView.builder dan sejenisnya dengan list dan map Dart adalah cara yang umum. Setiap Map berisi informasi satu item, dan nilainya diakses dengan key String.

1. Struktur proyek dan lingkungan pengembangan

• Folder lib: Tempat utama menulis kode Dart. main.dart adalah file awal default.

• File pubspec.yaml: File untuk mengatur metadata proyek, pengelolaan dependency(library/package), versi SDK, dan sebagainya.

• VSCode: Digunakan sebagai alat pengembangan utama.

• Command Palette (Ctrl+Shift+P / Cmd+Shift+P): Menjalankan berbagai perintah Flutter seperti Flutter: New Project, Flutter: Launch Emulator, dan sebagainya.

• Shortcut berguna: Wajib membiasakan shortcut berguna seperti autocomplete (Ctrl+Space/Option+Esc), refactor (Ctrl+Shift+R), melihat parameter (Ctrl+Option), dan sebagainya! (untuk meningkatkan produktivitas)

• Nantinya aku berencana banyak membuat postingan singkat yang berfokus pada shortcut VSCode.

• ex) Cara menyalakan Presentation Mode di VSCode

• Emulator: Perangkat mobile virtual, digunakan untuk menguji aplikasi tanpa perangkat sungguhan.

• Hot Reload: Mencerminkan perubahan kode ke layar dengan cepat sambil sebagian besar mempertahankan state aplikasi. (ikon berbentuk petir)

• Hot Restart: Menginisialisasi ulang state aplikasi dan memulai ulang aplikasi. (ikon berbentuk lingkaran)

• analysis_options.yaml: File untuk mengatur aturan analisis kode Dart. (Contoh: mengaktifkan/menonaktifkan aturan lint tertentu)

• Misalnya, ketika mencoba memakai fungsi print untuk menampilkan teks ke Debug Console, ia ribut bahwa itu tidak boleh dipakai di production.

• Karena itu bisa dihapus sendiri saat production, mari coba hapus ‘avoid_print’ dari aturan lint. Solusi 1. Tulis komentar ignore_for_file di bagian atas file dart terkait.

• Karena itu bisa dihapus sendiri saat production, mari coba hapus ‘avoid_print’ dari aturan lint.

• Solusi 1. Tulis komentar ignore_for_file di bagian atas file dart terkait.

• Solusi 2. Abaikan lewat analysis_options.yaml yang ada di root proyek.

• Solusi 2. Abaikan lewat analysis_options.yaml yang ada di root proyek.

• Solusi 2. Abaikan lewat analysis_options.yaml yang ada di root proyek.

1. Cara belajar Flutter

• Widget Catalog & Widget of the week: Pelajari berbagai widget melalui katalog widget dokumentasi resmi Flutter dan seri ‘Widget of the week’.

• Manfaatkan komunitas: Bertanya dan menjawab di komunitas terkait Flutter(forum online, open chat, dan sebagainya), lalu tumbuh bersama.

• Kuasai sintaks Dart: Karena Flutter menggunakan bahasa Dart, memahami sintaks Dart dengan cukup baik itu penting.

💭 Catatan harian

Aku sudah pernah memakai C, C++, Java, Javascript, Python, … banyak sekali bahasa, dan juga sudah pernah memakai berbagai framework/tool seperti Spring, Vue.js, Django, FlutterFlow. Namun karena kupikir mungkin ada konsep dasar yang kulewatkan, aku mulai mendengar kursus dasar Flutter dari awal.

Kupikir ini konsep yang sudah kuketahui dan ingin melompatinya cepat-cepat, tetapi ternyata sepertinya aku terlalu lama menjauh dari pengembangan. Mungkin otot otakku sudah kaku; di kepala, aku tidak bisa cepat membayangkan harus menyusun kode seperti apa.

Sekarang sudah menjadi era ketika di VSCode kita bisa coding secara efisien sambil mendapat bantuan AI seperti Inline Chat(Gemini 2.5 Pro) atau Code Recommendation(GitHub Copilot), cepat bertanya, menemukan jawaban, dan memanfaatkan autocomplete. Jadi aku berharap otot otak codingku bisa pulih lebih cepat.

Jalan masih panjang! Gas!