Biodata Siswa — Form, Validasi, Navigasi & Pengelolaan Data

Nama: Rafi Nugraha

📅 20 Oktober 2026

👨‍💻 Kelas: XI RPL 2

📚 Mata Pelajaran: Pemrograman Mobile (Flutter)

📌 PENDAHULUAN

Flutter merupakan framework yang dapat digunakan untuk membuat aplikasi mobile dengan menggunakan bahasa pemrograman Dart. Dalam proses pembelajaran Pemrograman Mobile, kita dapat mempraktikkan berbagai konsep Flutter melalui sebuah aplikasi sederhana.

Pada praktikum kali ini dibuat sebuah aplikasi bernama "Biodata Siswa".

Aplikasi ini digunakan untuk menyimpan dan mengelola data biodata siswa seperti nama, NIS, kelas, alamat, tanggal lahir, jenis kelamin, dan foto profil.

Selain menampilkan data siswa, aplikasi ini juga dilengkapi dengan fitur tambah data, pencarian, edit, hapus, validasi form, detail biodata, dan navigasi antar halaman.

Aplikasi menggunakan tampilan dengan tema warna biru tua sehingga memiliki tampilan yang sederhana, modern, dan nyaman digunakan.

🎯 TUJUAN PEMBUATAN APLIKASI

Setelah menyelesaikan praktikum ini, diharapkan siswa mampu:

🧠 Pemahaman Konsep

Menjelaskan fungsi Form pada Flutter.
Memahami penggunaan GlobalKey<FormState>.
Menggunakan TextFormField untuk membuat input data.
Memahami fungsi validator pada form.
Memahami penggunaan Navigator.push() dan Navigator.pop().
Memahami penggunaan StatefulWidget dalam pengelolaan data.

💻 Keterampilan Praktik

Membuat form input biodata siswa.
Membuat validasi pada setiap input.
Menggunakan showDatePicker() untuk memilih tanggal lahir.
Menampilkan data menggunakan ListView.builder.
Menampilkan data dalam bentuk Card dan ListTile.
Membuat halaman detail biodata siswa.
Membuat fitur edit dan hapus data.
Menggunakan Hero animation untuk transisi foto.
Membuat fitur pencarian data siswa.
Mengatur tampilan aplikasi menggunakan tema biru tua.

🧩 FITUR APLIKASI

Aplikasi Biodata Siswa memiliki beberapa fitur utama.

No	Fitur	Konsep Flutter
1	Input biodata siswa	Form, TextFormField
2	Validasi data	GlobalKey<FormState>, validator
3	Pilih tanggal lahir	showDatePicker
4	Jenis kelamin	Radio
5	Foto profil	CircleAvatar, Image.network
6	Daftar siswa	ListView.builder
7	Detail siswa	Navigator.push
8	Edit data	setState
9	Hapus data	showDialog
10	Pencarian siswa	TextField + filter
11	Jumlah siswa	Counter
12	Animasi foto	Hero

🎨 TAMPILAN APLIKASI

Aplikasi menggunakan tema warna biru tua sebagai warna utama.

Warna tersebut digunakan pada:

AppBar
Tombol tambah
Tombol simpan
Ikon tertentu
Elemen navigasi
Aksen tampilan aplikasi

Warna biru tua memberikan kesan profesional, sederhana, dan modern.

Contoh warna utama yang digunakan:

const Color(0xFF0D2A5C)

Sedangkan bagian background menggunakan warna yang lebih terang agar tulisan dan komponen mudah dibaca.

🗂️ STRUKTUR PROJECT

Struktur project aplikasi dibuat agar kode lebih terorganisir.

biodata_siswa/
├── lib/
│   ├── main.dart
│   ├── models/
│   │   └── siswa.dart
│   ├── pages/
│   │   ├── form_page.dart
│   │   ├── list_page.dart
│   │   └── detail_page.dart
│   └── widgets/
│       └── custom_textfield.dart
└── pubspec.yaml

Penjelasan Struktur

main.dart
Digunakan sebagai file utama untuk menjalankan aplikasi.

models/siswa.dart
Digunakan untuk membuat model atau struktur data siswa.

pages/list_page.dart
Digunakan untuk menampilkan daftar seluruh siswa.

pages/form_page.dart
Digunakan untuk menambahkan atau mengedit biodata siswa.

pages/detail_page.dart
Digunakan untuk menampilkan informasi lengkap seorang siswa.

widgets/custom_textfield.dart
Digunakan untuk menyimpan widget input yang dapat digunakan kembali.

👨‍💻 MEMBUAT MODEL DATA SISWA

Pertama, dibuat sebuah class Siswa yang digunakan untuk menyimpan data biodata.

class Siswa {
  String nama;
  String nis;
  String kelas;
  String alamat;
  DateTime tanggalLahir;
  String jenisKelamin;
  String? fotoUrl;

  Siswa({
    required this.nama,
    required this.nis,
    required this.kelas,
    required this.alamat,
    required this.tanggalLahir,
    required this.jenisKelamin,
    this.fotoUrl,
  });
}

Model tersebut memiliki beberapa atribut:

nama
nis
kelas
alamat
tanggalLahir
jenisKelamin
fotoUrl

Dengan model tersebut, data siswa dapat dikelola dengan lebih terstruktur.

🚀 MEMBUAT MAIN.DART

File main.dart digunakan untuk menjalankan aplikasi Flutter.

import 'package:flutter/material.dart';
import 'pages/list_page.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Biodata Siswa',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF0D2A5C),
        ),
      ),
      home: const ListPage(),
    );
  }
}

Pada bagian tersebut digunakan:

MaterialApp
ThemeData
ColorScheme
ListPage
Tema warna biru tua

📝 MEMBUAT FORM BIODATA

Form digunakan untuk memasukkan data siswa.

Data yang dimasukkan meliputi:

Nama lengkap
NIS
Kelas
Alamat
Tanggal lahir
Jenis kelamin
Foto profil

Input menggunakan TextFormField sehingga setiap data dapat diberikan validasi.

Contoh:

TextFormField(
  controller: _namaController,
  decoration: const InputDecoration(
    labelText: 'Nama Lengkap',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Nama tidak boleh kosong';
    }
    return null;
  },
)

Jika nama tidak diisi, aplikasi akan memberikan pesan kesalahan.

✅ VALIDASI FORM

Validasi digunakan agar data yang dimasukkan pengguna sesuai dengan ketentuan.

Contoh validasi:

Nama

Nama tidak boleh kosong.

NIS

NIS harus berupa angka dan memiliki minimal 4 karakter.

Kelas

Kelas wajib diisi.

Alamat

Alamat harus memiliki minimal 5 karakter.

Validasi dilakukan menggunakan:

final _formKey = GlobalKey<FormState>();

Kemudian sebelum menyimpan data:

if (_formKey.currentState!.validate()) {
  // Data valid dan dapat disimpan
}

Dengan validasi tersebut, aplikasi dapat mencegah data yang belum lengkap masuk ke daftar siswa.

📅 MEMILIH TANGGAL LAHIR

Untuk memasukkan tanggal lahir digunakan showDatePicker.

final DateTime? picked = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime.now(),
);

Pengguna dapat memilih tanggal lahir melalui kalender yang disediakan Flutter.

👤 JENIS KELAMIN

Jenis kelamin menggunakan RadioListTile.

Pilihan yang tersedia:

Laki-laki
Perempuan

Penggunaan radio button memudahkan pengguna memilih salah satu pilihan.

📋 MENAMPILKAN DATA SISWA

Setelah data berhasil disimpan, data akan ditampilkan pada halaman utama.

Data ditampilkan menggunakan:

ListView.builder
       ↓
Card
       ↓
ListTile

Setiap siswa dapat menampilkan:

Foto
Nama
NIS
Kelas
Tombol edit
Tombol hapus

Contoh tampilan informasi:

┌─────────────────────────────────────┐
│  👤  RAFI NUGRAHA                   │
│      NIS: 1022 | 11 RPL 2       ✏️ 🗑️│
└─────────────────────────────────────┘

🔍 FITUR PENCARIAN

Aplikasi juga memiliki fitur pencarian siswa.

Pengguna dapat mencari berdasarkan:

Nama
NIS

Contoh input:

Cari berdasarkan Nama atau NIS...

Ketika pengguna mengetik nama atau NIS, daftar siswa akan otomatis disaring sesuai kata yang dicari.

👁️ HALAMAN DETAIL BIODATA

Ketika salah satu data siswa ditekan, aplikasi akan berpindah ke halaman detail.

Halaman detail menampilkan:

Foto siswa
Nama
NIS
Kelas
Tanggal lahir
Jenis kelamin
Alamat

Navigasi dilakukan menggunakan:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(siswa: siswa),
  ),
);

✨ HERO ANIMATION

Untuk membuat perpindahan halaman terasa lebih menarik, digunakan Hero.

Contohnya:

Hero(
  tag: siswa.nis,
  child: CircleAvatar(
    backgroundImage: NetworkImage(siswa.fotoUrl!),
  ),
)

Ketika foto siswa ditekan, foto akan memiliki efek transisi menuju halaman detail.

✏️ FITUR EDIT DATA

Data siswa yang sudah tersimpan dapat diperbarui.

Ketika tombol Edit ditekan, halaman form akan terbuka kembali dengan data siswa yang sudah terisi.

Pengguna dapat mengubah:

Nama
NIS
Kelas
Alamat
Tanggal lahir
Jenis kelamin
Foto

Setelah selesai, pengguna dapat menekan tombol Simpan Perubahan.

🗑️ FITUR HAPUS DATA

Data siswa juga dapat dihapus.

Sebelum data dihapus, aplikasi menampilkan dialog konfirmasi:

Hapus Data

Apakah Anda yakin ingin menghapus data siswa ini?

[Batal]       [Hapus]

Fitur tersebut dibuat menggunakan showDialog.

Hal ini berguna untuk mencegah data terhapus secara tidak sengaja.

📊 COUNTER JUMLAH SISWA

Aplikasi juga dapat menampilkan jumlah data siswa yang tersedia.

Contoh:

Total Siswa: 40

Jumlah tersebut akan berubah secara otomatis ketika data ditambahkan atau dihapus.

🧪 PENGUJIAN APLIKASI

Setelah seluruh fitur selesai dibuat, aplikasi perlu diuji untuk memastikan setiap fitur berjalan dengan baik.

Beberapa pengujian yang dilakukan:

No	Pengujian	Hasil
1	Membuka aplikasi	Berhasil
2	Menambahkan siswa	Berhasil
3	Validasi nama kosong	Berhasil
4	Validasi NIS	Berhasil
5	Memilih tanggal lahir	Berhasil
6	Memilih jenis kelamin	Berhasil
7	Menampilkan data	Berhasil
8	Pencarian siswa	Berhasil
9	Melihat detail	Berhasil
10	Mengedit siswa	Berhasil
11	Menghapus siswa	Berhasil
12	Menampilkan foto	Berhasil

☑️ CHECKLIST FITUR

🟩 Fitur Wajib

☑️ Halaman list menampilkan data siswa
☑️ Pesan "Belum ada data" ketika list kosong
☑️ Form nama, NIS, kelas, dan alamat
☑️ Validasi nama
☑️ Validasi NIS
☑️ Validasi kelas
☑️ Validasi alamat
☑️ Date picker tanggal lahir
☑️ Radio jenis kelamin
☑️ Tombol simpan
☑️ Data muncul pada ListView
☑️ Halaman detail siswa
☑️ Fitur edit
☑️ Fitur hapus
☑️ Konfirmasi penghapusan
☑️ Foto profil
☑️ Card dan ListTile
☑️ Hero animation

⭐ Fitur Tambahan

☑️ Search berdasarkan nama/NIS
☑️ Counter jumlah siswa
🎨 Tema biru tua
📱 Tampilan aplikasi sederhana dan modern

📚 KESIMPULAN

Dari praktikum pembuatan Aplikasi Biodata Siswa, dapat disimpulkan bahwa Flutter menyediakan berbagai widget dan fitur yang dapat digunakan untuk membuat aplikasi mobile sederhana.

Melalui aplikasi ini, kita dapat mempraktikkan beberapa konsep penting Flutter seperti StatefulWidget, Form, TextFormField, validator, showDatePicker, Radio, ListView.builder, Card, ListTile, Navigator, AlertDialog, dan Hero animation.

Aplikasi tidak hanya dapat menampilkan data siswa, tetapi juga dapat melakukan proses menambah, mencari, melihat detail, mengedit, dan menghapus data.

Pembuatan aplikasi ini juga membantu meningkatkan kemampuan dalam memahami struktur project Flutter, pengelolaan state, navigasi halaman, validasi input, serta proses debugging ketika terjadi kesalahan.

Dengan pengembangan lebih lanjut, aplikasi Biodata Siswa dapat ditambahkan fitur seperti penyimpanan permanen menggunakan database, shared_preferences, pengambilan foto menggunakan kamera, autentikasi pengguna, dan fitur lainnya.

💡 PENUTUP

Aplikasi Biodata Siswa merupakan salah satu contoh project sederhana yang dapat digunakan untuk mempelajari dasar-dasar pengembangan aplikasi mobile menggunakan Flutter.

Semoga project ini dapat menjadi referensi bagi siswa XI RPL 2 dalam mempelajari Flutter, Dart, form handling, validasi, navigasi, dan pengelolaan data.

Terus belajar, terus mencoba, dan jangan takut error! 💙

#Flutter #Dart #PemrogramanMobile #BiodataSiswa #XI RPL 2 #RPL #PPLG #AplikasiMobile #BelajarFlutter

Cari Blog Ini

Mobile development by Rafi Nugraha XI RPL 2

📱 APLIKASI BIODATA SISWA MENGGUNAKAN FLUTTER