Struktur Kontrol Dart & Flutter

Postingan kali ini, untuk siswa Flutter pemula, materi Struktur Kontrol paling bagus dibuat bertahap: siswa tidak langsung diberi kode kompleks, tetapi memahami kondisi → percabangan → perulangan → kontrol loop → nested loop, lalu semuanya diterapkan pada Project Aplikasi Penilaian.

📱 PRAKTIKUM FLUTTER PEMULA

Struktur Kontrol Dart & Flutter

Project: Aplikasi Penilaian Siswa

Sasaran: Siswa SMK Kelas XI RPL/PPLG
Level: Pemula
Bahasa: Dart
Framework: Flutter
Tools: VS Code / Android Studio / DartPad
Durasi: ± 6–8 JP

---

🎯 Tujuan Pembelajaran

Setelah praktikum, siswa diharapkan mampu:

1. Menjelaskan fungsi struktur kontrol dalam pemrograman.
2. Menggunakan if, else if, dan else.
3. Menggunakan switch.
4. Menggunakan perulangan for, while, dan do-while.
5. Menggunakan break dan continue.
6. Membuat nested loop.
7. Menggabungkan struktur kontrol dalam aplikasi Flutter.
8. Membuat aplikasi sederhana untuk menentukan nilai dan predikat siswa.

---

🧠 BAGIAN 1 — Mengenal Struktur Kontrol

Struktur kontrol digunakan agar program dapat mengambil keputusan dan mengulang perintah.

Secara sederhana:

Program
   │
   ├── Apakah kondisi terpenuhi?
   │       │
   │       ├── Ya → lakukan sesuatu
   │       └── Tidak → lakukan sesuatu yang lain
   │
   └── Apakah perintah perlu diulang?
           │
           └── Ya → ulangi

Dalam Dart kita akan mempelajari:

Struktur	Fungsi
if	Pengambilan keputusan
switch	Memilih berdasarkan beberapa kondisi
for	Perulangan dengan jumlah tertentu
while	Perulangan selama kondisi benar
do-while	Perulangan minimal satu kali
break	Menghentikan perulangan
continue	Melewati satu putaran
Nested loop	Perulangan di dalam perulangan

---

🟢 PRAKTIKUM 1 — IF

Tujuan

Siswa dapat membuat keputusan sederhana menggunakan if.

Contoh

void main() {
  int nilai = 85;

  if (nilai >= 75) {
    print("LULUS");
  }
}

Jika nilai:

85

hasil:

LULUS

---

✏️ Latihan 1

Ubahlah program sehingga:

• Nilai ≥ 75 → LULUS
• Nilai < 75 → TIDAK LULUS

Tantangan

int nilai = 65;

Prediksi hasil sebelum menjalankan program.

---

🟢 PRAKTIKUM 2 — IF ELSE IF

Sekarang kita menentukan predikat nilai.

Gunakan aturan:

Nilai	Predikat
90–100	A
80–89	B
70–79	C
60–69	D
< 60	E

Kode

void main() {
  int nilai = 85;

  if (nilai >= 90) {
    print("Predikat A");
  } else if (nilai >= 80) {
    print("Predikat B");
  } else if (nilai >= 70) {
    print("Predikat C");
  } else if (nilai >= 60) {
    print("Predikat D");
  } else {
    print("Predikat E");
  }
}

💡 Pertanyaan

Apa yang terjadi jika:

nilai = 95;

Bagaimana jika:

nilai = 55;

---

🟡 PRAKTIKUM 3 — SWITCH

switch cocok digunakan ketika kita memiliki beberapa pilihan nilai/kategori.

Contoh:

void main() {
  String predikat = "A";

  switch (predikat) {
    case "A":
      print("Sangat Baik");
      break;

    case "B":
      print("Baik");
      break;

    case "C":
      print("Cukup");
      break;

    case "D":
      print("Kurang");
      break;

    default:
      print("Tidak diketahui");
  }
}

✏️ Latihan

Buat program:

1 → Senin
2 → Selasa
3 → Rabu
4 → Kamis
5 → Jumat
6 → Sabtu
7 → Minggu

Contoh:

int hari = 3;

Output:

Rabu

---

🔵 PRAKTIKUM 4 — LOOP

Sekarang kita belajar membuat program melakukan pekerjaan berulang.

A. FOR

void main() {
  for (int i = 1; i <= 10; i++) {
    print("Perulangan ke-$i");
  }
}

Output:

Perulangan ke-1
Perulangan ke-2
Perulangan ke-3
...
Perulangan ke-10

---

✏️ Tantangan

Buat program yang menampilkan:

1
2
3
4
5
6
7
8
9
10

Kemudian ubah menjadi:

10
9
8
7
...
1

---

🔵 PRAKTIKUM 5 — LOOP DATA SISWA

Misalnya terdapat data:

List<String> siswa = [
  "Andi",
  "Budi",
  "Citra",
  "Dina",
  "Eko"
];

Tampilkan semua nama menggunakan for.

void main() {
  List<String> siswa = [
    "Andi",
    "Budi",
    "Citra",
    "Dina",
    "Eko"
  ];

  for (int i = 0; i < siswa.length; i++) {
    print(siswa[i]);
  }
}

---

🔴 PRAKTIKUM 6 — BREAK

break digunakan untuk menghentikan loop.

void main() {
  for (int i = 1; i <= 10; i++) {
    print(i);

    if (i == 5) {
      break;
    }
  }
}

Hasil:

1
2
3
4
5

Setelah angka 5, loop berhenti.

---

✏️ Tantangan

Buat program mencari angka 7.

Jika ditemukan angka 7:

Angka ditemukan!

Kemudian hentikan loop.

---

🟣 PRAKTIKUM 7 — CONTINUE

Berbeda dengan break.

continue tidak menghentikan loop, tetapi melewati satu putaran.

void main() {
  for (int i = 1; i <= 10; i++) {
    if (i == 5) {
      continue;
    }

    print(i);
  }
}

Hasil:

1
2
3
4
6
7
8
9
10

Angka 5 dilewati.

---

🟠 PRAKTIKUM 8 — NESTED LOOP

Nested loop adalah:

Loop di dalam loop.

Contoh membuat pola:

*****
*****
*****
*****
*****

Kode:

void main() {
  for (int baris = 1; baris <= 5; baris++) {
    for (int kolom = 1; kolom <= 5; kolom++) {
      print("*");
    }
  }
}

Tetapi agar bentuknya terlihat lebih jelas:

void main() {
  for (int baris = 1; baris <= 5; baris++) {
    String hasil = "";

    for (int kolom = 1; kolom <= 5; kolom++) {
      hasil += "*";
    }

    print(hasil);
  }
}

Output:

*****
*****
*****
*****
*****

---

🚀 PROJECT AKHIR

📊 APLIKASI PENILAIAN SISWA

Setelah mempelajari semua struktur kontrol, siswa membuat aplikasi Flutter sederhana.

Konsep Aplikasi

Guru memasukkan:

Nama Siswa
Nilai Tugas
Nilai UTS
Nilai UAS

Kemudian aplikasi menghitung:

Nilai Akhir
Predikat
Keterangan

---

🧮 Rumus

Gunakan:

Nilai Akhir =
30% Tugas +
30% UTS +
40% UAS

Contoh:

Tugas = 80
UTS   = 75
UAS   = 90

Maka:

80 × 30% = 24
75 × 30% = 22.5
90 × 40% = 36

Nilai Akhir = 82.5

Predikat:

A = 90–100
B = 80–89
C = 70–79
D = 60–69
E = <60

Keterangan:

Nilai ≥ 75 → LULUS
Nilai < 75 → TIDAK LULUS

---

📱 TAMPILAN APLIKASI

Siswa diarahkan membuat UI seperti:

┌──────────────────────────────┐
│      📊 PENILAIAN SISWA     │
├──────────────────────────────┤
│                              │
│ Nama Siswa                   │
│ ┌──────────────────────────┐ │
│ │ Andi                     │ │
│ └──────────────────────────┘ │
│                              │
│ Nilai Tugas                  │
│ ┌──────────────────────────┐ │
│ │ 80                       │ │
│ └──────────────────────────┘ │
│                              │
│ Nilai UTS                    │
│ ┌──────────────────────────┐ │
│ │ 75                       │ │
│ └──────────────────────────┘ │
│                              │
│ Nilai UAS                    │
│ ┌──────────────────────────┐ │
│ │ 90                       │ │
│ └──────────────────────────┘ │
│                              │
│       [ HITUNG NILAI ]       │
│                              │
├──────────────────────────────┤
│ HASIL PENILAIAN              │
│                              │
│ Andi                         │
│ Nilai Akhir : 82.5           │
│ Predikat    : B              │
│ Status      : LULUS          │
└──────────────────────────────┘

---

💻 STRUKTUR LOGIKA PROJECT

Siswa belajar menggabungkan materi.

Input
 │
 ▼
Validasi nilai
 │
 ▼
Hitung nilai akhir
 │
 ▼
IF
 │
 ├── >= 90 → A
 ├── >= 80 → B
 ├── >= 70 → C
 ├── >= 60 → D
 └── < 60 → E
 │
 ▼
Cek kelulusan
 │
 ├── >= 75 → LULUS
 └── < 75 → TIDAK LULUS
 │
 ▼
Tampilkan hasil

---

🧩 KODE PROJECT DASAR

Untuk siswa pemula, saya sarankan jangan langsung menggunakan database. Fokus dulu pada struktur kontrol.

Berikut starter main.dart:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Aplikasi Penilaian',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
        ),
        useMaterial3: true,
      ),
      home: const PenilaianPage(),
    );
  }
}

class PenilaianPage extends StatefulWidget {
  const PenilaianPage({super.key});

  @override
  State<PenilaianPage> createState() => _PenilaianPageState();
}

class _PenilaianPageState extends State<PenilaianPage> {
  final namaController = TextEditingController();
  final tugasController = TextEditingController();
  final utsController = TextEditingController();
  final uasController = TextEditingController();

  double? nilaiAkhir;
  String predikat = '';
  String status = '';

  void hitungNilai() {
    final nama = namaController.text.trim();

    final tugas = double.tryParse(tugasController.text);
    final uts = double.tryParse(utsController.text);
    final uas = double.tryParse(uasController.text);

    if (nama.isEmpty ||
        tugas == null ||
        uts == null ||
        uas == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Lengkapi semua data terlebih dahulu!'),
        ),
      );
      return;
    }

    if (tugas < 0 ||
        tugas > 100 ||
        uts < 0 ||
        uts > 100 ||
        uas < 0 ||
        uas > 100) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Nilai harus berada antara 0 sampai 100!'),
        ),
      );
      return;
    }

    final hasil =
        (tugas * 0.30) +
        (uts * 0.30) +
        (uas * 0.40);

    String hasilPredikat;

    if (hasil >= 90) {
      hasilPredikat = 'A';
    } else if (hasil >= 80) {
      hasilPredikat = 'B';
    } else if (hasil >= 70) {
      hasilPredikat = 'C';
    } else if (hasil >= 60) {
      hasilPredikat = 'D';
    } else {
      hasilPredikat = 'E';
    }

    final hasilStatus =
        hasil >= 75 ? 'LULUS' : 'TIDAK LULUS';

    setState(() {
      nilaiAkhir = hasil;
      predikat = hasilPredikat;
      status = hasilStatus;
    });
  }

  void resetForm() {
    namaController.clear();
    tugasController.clear();
    utsController.clear();
    uasController.clear();

    setState(() {
      nilaiAkhir = null;
      predikat = '';
      status = '';
    });
  }

  Widget inputNilai(
    String label,
    TextEditingController controller,
  ) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: TextField(
        controller: controller,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          labelText: label,
          border: const OutlineInputBorder(),
          prefixIcon: const Icon(Icons.edit),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('📊 Penilaian Siswa'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [

            const Text(
              'Data Siswa',
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),

            const SizedBox(height: 20),

            TextField(
              controller: namaController,
              decoration: const InputDecoration(
                labelText: 'Nama Siswa',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.person),
              ),
            ),

            const SizedBox(height: 16),

            inputNilai(
              'Nilai Tugas',
              tugasController,
            ),

            inputNilai(
              'Nilai UTS',
              utsController,
            ),

            inputNilai(
              'Nilai UAS',
              uasController,
            ),

            const SizedBox(height: 10),

            ElevatedButton.icon(
              onPressed: hitungNilai,
              icon: const Icon(Icons.calculate),
              label: const Text('HITUNG NILAI'),
            ),

            const SizedBox(height: 10),

            OutlinedButton.icon(
              onPressed: resetForm,
              icon: const Icon(Icons.refresh),
              label: const Text('RESET'),
            ),

            const SizedBox(height: 30),

            if (nilaiAkhir != null)
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Column(
                    children: [
                      const Text(
                        'HASIL PENILAIAN',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

                      const SizedBox(height: 20),

                      Text(
                        namaController.text,
                        style: const TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

                      const SizedBox(height: 15),

                      Text(
                        'Nilai Akhir',
                        style: TextStyle(
                          color: Colors.grey.shade600,
                        ),
                      ),

                      Text(
                        nilaiAkhir!.toStringAsFixed(1),
                        style: const TextStyle(
                          fontSize: 42,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

                      const SizedBox(height: 10),

                      Text(
                        'Predikat: $predikat',
                        style: const TextStyle(
                          fontSize: 20,
                        ),
                      ),

                      const SizedBox(height: 10),

                      Text(
                        status,
                        style: const TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    namaController.dispose();
    tugasController.dispose();
    utsController.dispose();
    uasController.dispose();
    super.dispose();
  }
}

---

🔥 PENGEMBANGAN PROJECT

Setelah aplikasi dasar berhasil, jangan berhenti di sini. Jadikan project ini sebagai sarana menguji seluruh materi Struktur Kontrol.

Level 1 — Dasar

Tambahkan:

• Nama siswa
• Nilai tugas
• Nilai UTS
• Nilai UAS
• Nilai akhir
• Predikat
• Status kelulusan

---

Level 2 — switch

Tambahkan pilihan mata pelajaran:

Pemrograman
Basis Data
Jaringan
UI/UX
Bahasa Inggris

Kemudian gunakan switch untuk menentukan bobot atau keterangan tertentu.

---

Level 3 — loop

Buat daftar beberapa siswa:

Andi
Budi
Citra
Deni
Eka

Kemudian tampilkan menggunakan ListView.builder.

Di sini siswa mulai melihat hubungan antara:

Dart Loop → Flutter Widget

---

🚀 Level 4 — BREAK & CONTINUE

Misalnya terdapat 10 data siswa.

Jika ditemukan siswa bernama:

Citra

gunakan break untuk menghentikan pencarian.

Untuk siswa yang datanya belum lengkap, gunakan:

continue;

agar siswa tersebut dilewati.

---

🚀 Level 5 — NESTED LOOP

Buat data:

Kelas XI RPL 1
 ├── Andi
 ├── Budi
 ├── Citra

Kelas XI RPL 2
 ├── Deni
 ├── Eka
 ├── Fajar

Struktur datanya dapat dibuat:

List<List<String>> kelas = [
  ['Andi', 'Budi', 'Citra'],
  ['Deni', 'Eka', 'Fajar'],
];

Kemudian:

for (int i = 0; i < kelas.length; i++) {
  for (int j = 0; j < kelas[i].length; j++) {
    print(kelas[i][j]);
  }
}

Ini menjadi contoh nested loop yang benar-benar relevan dengan aplikasi sekolah.

---

🏆 TUGAS PROJECT SISWA

Buat aplikasi:

"Aplikasi Penilaian Siswa Berbasis Flutter"

Minimal mempunyai:

• Input nama siswa
• Input nilai tugas
• Input nilai UTS
• Input nilai UAS
• Tombol Hitung
• Tombol Reset
• Validasi input
• Perhitungan nilai akhir
• Predikat A–E
• Status LULUS/TIDAK LULUS
• Tampilan hasil yang menarik

Pengembangan nilai tambah:

• Daftar banyak siswa
• ListView.builder
• Tambah data
• Hapus data
• Edit data
• Pencarian siswa
• Rekap nilai
• Nilai tertinggi
• Nilai terendah
• Rata-rata kelas

---

📝 LKPD / LEMBAR KERJA SISWA

Aktivitas 1

Buat program menggunakan if untuk menentukan:

LULUS / TIDAK LULUS

Aktivitas 2

Gunakan if else if untuk menentukan:

A / B / C / D / E

Aktivitas 3

Gunakan switch untuk menentukan nama hari.

Aktivitas 4

Gunakan for untuk menampilkan 10 siswa.

Aktivitas 5

Gunakan break untuk menghentikan pencarian siswa.

Aktivitas 6

Gunakan continue untuk melewati data siswa yang tidak lengkap.

Aktivitas 7

Gunakan nested loop untuk menampilkan siswa berdasarkan kelas.

Aktivitas 8

Gabungkan seluruh konsep menjadi Aplikasi Penilaian.

---

📊 RUBRIK PENILAIAN

Komponen	Bobot
Struktur program	15
Implementasi if	15
Implementasi switch	10
Implementasi loop	15
break & continue	10
Nested loop	10
UI/UX Flutter	15
Kreativitas	10
Total	100

---

💡 Alur pembelajaran yang saya rekomendasikan

Untuk siswa kelas XI RPL/PPLG yang masih pemula, urutannya sebaiknya:

Pertemuan 1

if → else → else if

Pertemuan 2

switch → latihan kasus

Pertemuan 3

for → while → do while

Pertemuan 4

break → continue → nested loop

Pertemuan 5

Flutter UI + input data

Pertemuan 6

Project Aplikasi Penilaian

Pertemuan 7

Pengembangan daftar banyak siswa

Pertemuan 8

Presentasi/demo project

Dengan pola ini, siswa tidak sekadar menghafal sintaks, tetapi melihat langsung bahwa if, switch, dan loop adalah bagian dari logika aplikasi Flutter yang mereka buat sendiri.

Read More