Praktikum Flutter Seri 2 — Struktur Project dan main.dart



Halo semuanya! Selamat datang kembali di catatan perjalananku belajar Mobile Development. Setelah sebelumnya kita berhasil menginstal dan mengatur environment Flutter, di praktikum seri kedua ini kita akan mulai membedah bagaimana sebenarnya struktur awal sebuah project Flutter dan mencoba membuat aplikasi sederhana dari nol!

👤 Identitas

  • Nama: Hadziq Nadhiril Afkar Haqiqi

  • Jurusan: Pemrograman Perangkat Lunak dan Gim (PPLG)

  • Mata Pelajaran: KK. Pemrograman Bergerak

  • Topik Praktikum: Memahami struktur main.dart dan Widget Tree dasar.

🎯 Tujuan Praktikum

Praktikum kali ini memiliki dua tujuan utama:

  1. Memahami alur kerja dasar aplikasi Flutter, mulai dari fungsi main() hingga merender antarmuka ke layar menggunakan runApp().

  2. Membangun hierarki Widget Tree sederhana menggunakan MaterialApp, Scaffold, AppBar, Center, Container, dan Text.

🛠️ Tools yang Digunakan

Untuk mengeksekusi project ini, saya menggunakan beberapa tools andalan:

  • Framework: Flutter SDK & Dart

  • Code Editor: Visual Studio Code (dengan ekstensi Flutter & Dart)

  • Platform Uji Coba: Emulator Android / Chrome (Web)

💻 Kode Program (main.dart)

Dalam Flutter, file paling penting yang menjadi jantung aplikasi berada di dalam folder lib/, yaitu file main.dart. Pada praktikum ini, saya menghapus semua kode bawaan (counter app) dan menggantinya dengan kode untuk menampilkan Profil Siswa RPL.

Berikut adalah kodenya:







📱 Hasil Aplikasi

Setelah kode dieksekusi menggunakan perintah flutter run, berikut adalah tampilan aplikasi yang berhasil dijalankan. Tampilannya terlihat seperti sebuah kartu ID digital yang rapi berada tepat di tengah layar!



💡 Refleksi Singkat

Praktikum ini benar-benar membuka wawasan saya tentang bagaimana Flutter bekerja menggunakan konsep Widget. Semuanya di Flutter adalah Widget! Rasanya seperti menyusun balok lego; kita memasukkan Text ke dalam Column, lalu dibungkus dengan Container, dan diposisikan di tengah menggunakan Center.

Meskipun terlihat sederhana, memahami fondasi struktur main() → runApp() → MaterialApp → Scaffold sangat krusial sebelum masuk ke pembuatan UI yang lebih kompleks. Mengatur environment dan memastikan kompilasinya berjalan mulus di awal juga memberi kepuasan tersendiri.

Sekian catatan praktikum kali ini. Sampai jumpa di Praktikum Flutter Seri 3! 🚀

Komentar

Posting Komentar

Postingan populer dari blog ini

🚀 Bikin Aplikasi BMI Calculator Kece dengan Flutter (UI Modern & Simpel!)

Gambar
  Pernah bosan dengan tutorial aplikasi pemula yang UI-nya kaku dan terlihat seperti aplikasi tahun 2010? Jika kamu baru belajar Flutter, membuat aplikasi Kalkulator BMI (Body Mass Index) adalah salah satu proyek wajib. Tapi kali ini, kita tidak akan membuat UI yang membosankan. Kita akan membangun Kalkulator BMI dengan desain Dark Mode yang elegan, interaksi slider yang mulus, dan menggunakan struktur kode yang rapi. Hanya dengan satu file main.dart , kamu sudah bisa pamer aplikasi ini ke teman-temanmu! 😎 ✨ Apa yang Menarik dari Kode Ini? Sebelum masuk ke kode, mari kita lihat beberapa teknik keren yang digunakan dalam aplikasi ini: Dark Theme Bawaan: Kita menggunakan ThemeData.dark() dengan modifikasi warna custom ( #0A0E21 ) yang membuatnya terlihat premium. Reusable Widget: Daripada menulis ulang kode untuk kartu slider Tinggi dan Berat badan, kita membuat sebuah method _buildCard yang bisa digunakan berkali-kali. Kode jadi jauh lebih bersih ( Clean Code )! Dialog Po...
Baca selengkapnya

Dunia Mobile Development: Dari Pengguna HP Menjadi Pembuat Aplikasi

Gambar
Setiap hari, kita menghabiskan berjam-jam menatap layar smartphone . Mulai dari bangun tidur mengecek pesan, memesan makanan, hingga scrolling media sosial. Pernahkah terlintas di pikiranmu: "Bagaimana kalau saya tidak hanya menjadi pengguna, tetapi juga pembuat aplikasi tersebut?" Inilah gerbang menuju Dunia Mobile Development . Mari kita bedah apa saja yang perlu diketahui untuk beralih dari sekadar penikmat menjadi seorang pencipta! 1. Apa Itu Mobile Development? Mobile Development adalah proses pembuatan aplikasi perangkat lunak (software) yang dirancang khusus untuk berjalan di perangkat bergerak, seperti smartphone dan tablet. Proses ini melibatkan perancangan antarmuka (UI/UX), penulisan kode program (coding), pengujian, hingga peluncuran aplikasi ke toko aplikasi seperti Google Play Store atau Apple App Store. 2. Perbedaan Android dan iOS Di dunia mobile , terdapat dua raksasa sistem operasi: Android dan iOS. Berikut adalah perbedaan mendasarnya: Fitur Android iOS ...
Baca selengkapnya