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:

Menjelaskan fungsi struktur kontrol dalam pemrograman.
Menggunakan if, else if, dan else.
Menggunakan switch.
Menggunakan perulangan for, while, dan do-while.
Menggunakan break dan continue.
Membuat nested loop.
Menggabungkan struktur kontrol dalam aplikasi Flutter.
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:

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:

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:

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:

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:

Pengembangan nilai tambah:

📝 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.

Struktur Kontrol Dart & Flutter

📱 PRAKTIKUM FLUTTER PEMULA

Struktur Kontrol Dart & Flutter

Project: Aplikasi Penilaian Siswa

🎯 Tujuan Pembelajaran

🧠 BAGIAN 1 — Mengenal Struktur Kontrol

🟢 PRAKTIKUM 1 — IF

Tujuan

Contoh

✏️ Latihan 1

Tantangan

🟢 PRAKTIKUM 2 — IF ELSE IF

Kode

💡 Pertanyaan

🟡 PRAKTIKUM 3 — SWITCH

✏️ Latihan

🔵 PRAKTIKUM 4 — LOOP

A. FOR

✏️ Tantangan

🔵 PRAKTIKUM 5 — LOOP DATA SISWA

🔴 PRAKTIKUM 6 — BREAK

✏️ Tantangan

🟣 PRAKTIKUM 7 — CONTINUE

🟠 PRAKTIKUM 8 — NESTED LOOP

🚀 PROJECT AKHIR

📊 APLIKASI PENILAIAN SISWA

Konsep Aplikasi

🧮 Rumus

📱 TAMPILAN APLIKASI

💻 STRUKTUR LOGIKA PROJECT

🧩 KODE PROJECT DASAR

🔥 PENGEMBANGAN PROJECT

Level 1 — Dasar

Level 2 — switch

Level 3 — loop

🚀 Level 4 — BREAK & CONTINUE

🚀 Level 5 — NESTED LOOP

🏆 TUGAS PROJECT SISWA

Buat aplikasi:

Pengembangan nilai tambah:

📝 LKPD / LEMBAR KERJA SISWA

Aktivitas 1

Aktivitas 2

Aktivitas 3

Aktivitas 4

Aktivitas 5

Aktivitas 6

Aktivitas 7

Aktivitas 8

📊 RUBRIK PENILAIAN

💡 Alur pembelajaran yang saya rekomendasikan

Tidak ada komentar:

Posting Komentar

Chat Admin

Arsip Blog

Labels

Categories

Blogger Tricks

Blogger Themes

Archives

Level 2 — `switch`

Level 3 — `loop`