Postingan kalini Saya lanjutkan sebagai Seri 2 dengan pendekatan yang cocok untuk siswa RPL pemula: pahami struktur → pahami alur program → praktik → modifikasi → tantangan.

📱 SERI 2 — Mengenal Struktur Project Flutter & main.dart

🎯 Tujuan Pembelajaran

Setelah pembelajaran ini, siswa mampu:

1. Menjelaskan struktur dasar project Flutter.
2. Menjelaskan fungsi folder dan file penting dalam project.
3. Menjelaskan fungsi main().
4. Menjelaskan fungsi runApp().
5. Memahami konsep Widget.
6. Menggunakan MaterialApp.
7. Menggunakan Scaffold.
8. Menampilkan Text.
9. Menggunakan Container.
10. Memahami konsep Hot Reload.
11. Membuat dan memodifikasi aplikasi Flutter sederhana.

---

1. 🚀 Dari Mana Aplikasi Flutter Dimulai?

Ketika kita membuat project Flutter:

flutter create belajar_flutter

Flutter akan membuat berbagai folder dan file.

Struktur sederhananya:

belajar_flutter/
│
├── android/
├── ios/
├── lib/
│   └── main.dart
│
├── test/
├── web/
├── windows/
├── macos/
├── linux/
│
├── pubspec.yaml
└── README.md

Untuk tahap awal, jangan mencoba menghafal semuanya.

Kita fokus terlebih dahulu pada:

lib/
└── main.dart

dan:

pubspec.yaml

---

2. 📁 Mengenal Folder lib

Folder:

lib/

merupakan tempat utama kita menyimpan kode Dart aplikasi Flutter.

Contoh:

lib/
│
├── main.dart
├── screens/
├── widgets/
├── models/
└── services/

Untuk project sederhana, kita bisa mulai hanya dengan:

lib/
└── main.dart

Seiring project semakin besar, kode dapat dipisahkan menjadi beberapa file.

---

3. 📄 Apa Itu main.dart?

main.dart biasanya menjadi titik awal aplikasi Flutter.

Contoh:

void main() {
  print('Hello Flutter');
}

Ketika program dijalankan, Dart akan mencari:

main()

Jadi kita dapat menganggap:

main() adalah pintu masuk program Dart.

---

4. 🧠 Memahami main()

Perhatikan:

void main() {
  print('Hello Flutter');
}

Mari kita pecah.

void

Menunjukkan bahwa fungsi tersebut tidak mengembalikan nilai.

main

Nama fungsi utama yang pertama kali dijalankan.

()

Menunjukkan bahwa fungsi tersebut tidak menerima parameter.

{ }

Berisi instruksi yang akan dijalankan.

---

🧪 Praktikum 1

Buka:

lib/main.dart

Hapus kode yang ada dan masukkan:

void main() {
  print('Saya sedang belajar Flutter');
  print('Nama saya Darsu');
  print('Saya siswa RPL');
}

Kemudian jalankan:

flutter run

Perhatikan hasilnya pada terminal/debug console.

---

5. 📱 Dari Dart ke Aplikasi Flutter

Sekarang kita mulai masuk ke Flutter.

Contoh:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Text('Hello Flutter'),
    ),
  );
}

Ada beberapa konsep baru:

import
runApp()
MaterialApp
Text

Kita pelajari satu per satu.

---

6. 📦 Apa Fungsi import?

Kode:

import 'package:flutter/material.dart';

digunakan untuk mengambil library yang diperlukan.

material.dart menyediakan banyak komponen Flutter berbasis Material Design.

Misalnya:

MaterialApp
Scaffold
AppBar
Text
Button
Icon
Container
Column
Row

Tanpa import tersebut, kita tidak dapat menggunakan widget Material tertentu.

---

7. 🚀 Mengenal runApp()

Perhatikan:

runApp(
  const MaterialApp(
    home: Text('Hello Flutter'),
  ),
);

runApp() digunakan untuk menjalankan aplikasi Flutter dengan widget yang diberikan sebagai root aplikasi.

Sederhananya:

main()
   ↓
runApp()
   ↓
Widget utama
   ↓
Tampilan aplikasi

Contoh:

void main() {
  runApp(
    const Text('Hello Flutter'),
  );
}

---

8. 🧩 Apa Itu Widget?

Ini adalah konsep sangat penting dalam Flutter.

Flutter menggunakan pendekatan:

Everything is a Widget.

Artinya, banyak bagian aplikasi direpresentasikan sebagai widget.

Contohnya:

Text
Image
Icon
Button
Container
Row
Column
Scaffold
AppBar

Bayangkan kita membuat sebuah rumah.

Rumah
│
├── Atap
├── Dinding
├── Pintu
└── Jendela

Dalam Flutter:

Aplikasi
│
├── Scaffold
│   ├── AppBar
│   └── Body
│       └── Column
│           ├── Text
│           └── Button

Widget disusun membentuk widget tree.

---

9. 🏗️ Mengenal MaterialApp

Biasanya aplikasi Flutter menggunakan:

MaterialApp()

Contoh:

MaterialApp(
  home: Text('Hello Flutter'),
)

MaterialApp membantu menyediakan struktur dan konfigurasi dasar aplikasi berbasis Material.

Contohnya:

MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Belajar Flutter',
  home: ...,
)

---

10. 🏠 Mengenal home

Contoh:

MaterialApp(
  home: Text('Hello Flutter'),
)

home menentukan widget yang ditampilkan sebagai halaman awal aplikasi.

Secara sederhana:

MaterialApp
      ↓
    home
      ↓
Halaman pertama

---

11. 📝 Mengenal Text

Widget:

Text()

digunakan untuk menampilkan teks.

Contoh:

Text('Hello Flutter')

Kita dapat memberikan style:

Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
  ),
)

---

12. 🧱 Mengenal Scaffold

Dalam aplikasi Flutter berbasis Material, Scaffold sangat sering digunakan sebagai kerangka halaman.

Contoh:

Scaffold(
  appBar: AppBar(
    title: const Text('Belajar Flutter'),
  ),
  body: const Center(
    child: Text('Hello Flutter'),
  ),
)

Strukturnya:

Scaffold
│
├── AppBar
│
└── Body

Kita bisa menganggap:

Scaffold adalah kerangka dasar sebuah halaman aplikasi.

---

13. 🧭 Mengenal AppBar

Contoh:

AppBar(
  title: const Text('Belajar Flutter'),
)

AppBar merupakan bagian atas aplikasi.

Biasanya digunakan untuk:

• Judul halaman
• Tombol kembali
• Menu
• Action
• Icon

---

14. 🎯 Mengenal Center

Contoh:

Center(
  child: Text('Hello Flutter'),
)

Center digunakan untuk menempatkan widget di tengah.

Strukturnya:

Center
   │
   └── Text

Konsep penting:

parent
  ↓
child

Center adalah parent.

Text adalah child.

---

15. 🧱 Mengenal Container

Container merupakan widget yang sering digunakan untuk mengatur tampilan dan ruang.

Contoh:

Container(
  width: 200,
  height: 100,
  child: const Text('Flutter'),
)

Kita dapat mengatur:

width
height
padding
margin
alignment
decoration
color

Contoh lebih menarik:

Container(
  width: 250,
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(20),
  ),
  child: const Text(
    'Belajar Flutter',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
  ),
)

---

16. 🔥 Praktikum Utama — Aplikasi Flutter Pertama

Sekarang kita gabungkan semua materi.

Buka:

lib/main.dart

Kemudian ganti seluruh kode dengan:

import 'package:flutter/material.dart';

void main() {
  runApp(const BelajarFlutterApp());
}

class BelajarFlutterApp extends StatelessWidget {
  const BelajarFlutterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Belajar Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Belajar Flutter'),
        ),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(24),
            margin: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.indigo,
              borderRadius: BorderRadius.circular(20),
            ),
            child: const Text(
              'Halo, saya sedang belajar Flutter!',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

---

17. 🔍 Mari Bedah Kodenya

Jangan hanya copy-paste.

Kita pahami.

Bagian 1

import 'package:flutter/material.dart';

Mengambil library Material Flutter.

---

Bagian 2

void main() {
  runApp(const BelajarFlutterApp());
}

Program dimulai dari:

main()

Kemudian:

runApp()

menjalankan aplikasi.

---

Bagian 3

class BelajarFlutterApp extends StatelessWidget

Kita membuat widget aplikasi sendiri.

Namanya:

BelajarFlutterApp

---

Bagian 4

MaterialApp()

Menjadi konfigurasi dasar aplikasi.

---

Bagian 5

Scaffold()

Menjadi kerangka halaman.

---

Bagian 6

AppBar()

Menampilkan bagian atas aplikasi.

---

Bagian 7

Center()

Menempatkan konten di tengah.

---

Bagian 8

Container()

Membungkus dan mengatur tampilan konten.

---

Bagian 9

Text()

Menampilkan tulisan.

---

18. 🌳 Memahami Widget Tree

Kode tadi dapat digambarkan:

BelajarFlutterApp
        │
        ▼
   MaterialApp
        │
        ▼
     Scaffold
     /      \
    ▼        ▼
 AppBar     Body
    │        │
    ▼        ▼
  Text     Center
              │
              ▼
          Container
              │
              ▼
             Text

Inilah salah satu konsep terpenting Flutter:

Aplikasi Flutter dibangun dari widget yang disusun menjadi sebuah tree.

---

19. ⚡ Apa Itu Hot Reload?

Salah satu fitur menarik Flutter adalah Hot Reload.

Misalnya kita mengubah:

fontSize: 22,

menjadi:

fontSize: 30,

Kemudian melakukan Hot Reload.

Perubahan dapat terlihat dengan cepat tanpa harus selalu menjalankan ulang seluruh aplikasi dari awal.

---

🔥 Praktikum Hot Reload

Ubah:

fontSize: 22,

menjadi:

fontSize: 30,

Kemudian ubah:

'Belajar Flutter'

menjadi:

'Flutter Itu Menyenangkan!'

Lakukan Hot Reload.

Amati perubahan pada aplikasi.

---

20. 🎨 Tantangan Modifikasi

Sekarang siswa tidak boleh lagi hanya mengikuti contoh.

Lakukan perubahan berikut.

Tantangan 1

Ubah judul:

Belajar Flutter

menjadi:

Pemrograman Perangkat Bergerak

Tantangan 2

Ubah warna Container.

Tantangan 3

Ubah ukuran teks.

Tantangan 4

Ubah radius:

BorderRadius.circular(20)

menjadi:

BorderRadius.circular(40)

Tantangan 5

Tambahkan emoji:

🚀
📱
💻
🔥

---

21. 🧪 Tantangan Level 2

Buat tampilan seperti kartu profil sederhana.

Informasi:

Nama       : Nama Siswa
Kelas      : XI RPL
Sekolah    : SMKN 1 Banjar
Materi     : Flutter
Status     : Sedang Belajar

Gunakan widget yang sudah dipelajari:

MaterialApp
Scaffold
AppBar
Center
Container
Text

Belum perlu menggunakan database, API, login, atau widget yang kompleks.

Fokus kita adalah memahami struktur.

---

22. 🧠 Pertanyaan Pemahaman

Jawablah dengan bahasa sendiri.

Pertanyaan 1

Apa fungsi:

main()

?

Pertanyaan 2

Apa fungsi:

runApp()

?

Pertanyaan 3

Apa yang dimaksud dengan Widget?

Pertanyaan 4

Apa fungsi:

MaterialApp

?

Pertanyaan 5

Apa fungsi:

Scaffold

?

Pertanyaan 6

Apa fungsi:

Container

?

Pertanyaan 7

Apa fungsi:

Text

?

Pertanyaan 8

Apa yang dimaksud dengan Hot Reload?

---

23. 📝 Tugas Individu

Buat sebuah aplikasi Flutter sederhana dengan tema:

"Profil Siswa RPL"

Minimal menampilkan:

PROFIL SISWA RPL

Nama:
Kelas:
Sekolah:
Hobi:
Cita-cita:
Materi yang sedang dipelajari:

Status:
Sedang Belajar Flutter 🚀

Ketentuan

Gunakan minimal:

• MaterialApp
• Scaffold
• AppBar
• Center
• Container
• Text

Kreativitas

Siswa bebas menentukan:

• Warna
• Ukuran teks
• Padding
• Margin
• Border radius
• Tampilan kartu

---

24. 📸 Bukti Praktikum

Setelah aplikasi berhasil dijalankan:

1. Jalankan aplikasi.
2. Pastikan tidak terdapat error.
3. Tampilkan hasil aplikasi.
4. Ambil screenshot.
5. Simpan screenshot dengan nama:

Nama_Kelas_ProfilFlutter.png

Contoh:

Deni_XIRPL1_ProfilFlutter.png

---

25. 📚 Rangkuman Materi

Hari ini kita sudah mengenal:

Flutter
  │
  ├── Project
  │
  ├── lib/
  │    └── main.dart
  │
  ├── main()
  │
  ├── runApp()
  │
  ├── Widget
  │
  ├── MaterialApp
  │
  ├── Scaffold
  │
  ├── AppBar
  │
  ├── Center
  │
  ├── Container
  │
  ├── Text
  │
  └── Hot Reload

Yang paling penting bukan menghafal semua kode.

Tetapi memahami alurnya:

main()
   ↓
runApp()
   ↓
MaterialApp
   ↓
Scaffold
   ↓
AppBar + Body
   ↓
Widget
   ↓
Tampilan Aplikasi

---

🎯 Refleksi Pembelajaran

Sebelum meninggalkan kelas, jawab tiga pertanyaan berikut:

1. Apa konsep Flutter yang paling saya pahami hari ini?

2. Bagian mana yang masih membuat saya bingung?

3. Apa yang ingin saya coba buat menggunakan Flutter?

Tuliskan jawaban dengan jujur. Tidak harus panjang.

---

🚀 Preview Seri 3

Setelah memahami struktur project dan widget dasar, kita akan mulai membuat UI yang lebih menarik.

Seri 3 — Mengenal Layout Flutter

Materi berikutnya:

• Row
• Column
• Expanded
• SizedBox
• Padding
• Align
• Icon
• Image
• Card
• ElevatedButton
• TextField
• Membuat Dashboard Siswa RPL

Pada seri berikutnya, siswa mulai belajar bahwa membuat aplikasi bukan sekadar menampilkan teks, tetapi menyusun berbagai widget menjadi antarmuka yang nyaman digunakan.

Belajar Flutter bukan tentang seberapa cepat kita mengetik kode. Yang lebih penting adalah memahami bagaimana setiap widget bekerja dan bagaimana widget tersebut disusun menjadi sebuah aplikasi.
:::

Butuh LKPD unduh disini!