Flutter Dasar: Dari Kode Menjadi Aplikasi Profil Siswa”
BELAJAR FLUTTER DASAR DARI KODE MENJADI APLIKASI PROFIL SISWA
🎯 Tujuan
Pada praktikum kali ini saya belajar mengenal dasar-dasar Flutter, terutama cara kerja file main.dart dan beberapa widget yang digunakan untuk membuat tampilan aplikasi.
Saya juga mencoba membuat aplikasi sederhana berupa Profil Siswa RPL dengan menggunakan beberapa widget dasar Flutter.
📖 Mengenal Flutter
Flutter adalah framework yang digunakan untuk membuat aplikasi dengan menggunakan bahasa pemrograman Dart.
Flutter memiliki banyak widget yang dapat digunakan untuk membuat tampilan aplikasi. Widget-widget tersebut dapat disusun dan dikombinasikan sehingga menghasilkan tampilan sesuai dengan yang kita inginkan.
Pada praktikum ini saya menggunakan DartPad untuk menulis dan menjalankan kode Flutter secara langsung melalui browser.
🗂️ Mengenal main.dart
Dalam aplikasi Flutter, main.dart menjadi salah satu file penting karena di dalamnya terdapat fungsi main() yang menjadi titik awal program.
Ketika aplikasi dijalankan, program akan mulai dari:
main()
↓
runApp()
↓
MaterialApp
↓
Scaffold
↓
AppBar
↓
Center
↓
Container
↓
Text
Dari alur tersebut, saya bisa memahami bagaimana Flutter mulai menjalankan program sampai akhirnya menampilkan tulisan dan tampilan aplikasi di layar.
🧩 Widget yang Digunakan
1. MaterialApp
MaterialApp digunakan sebagai dasar aplikasi Flutter. Widget ini dapat digunakan untuk mengatur halaman utama dan berbagai pengaturan aplikasi.
2. Scaffold
Scaffold digunakan untuk membuat struktur dasar halaman. Di dalamnya terdapat bagian seperti AppBar dan body.
3. AppBar
AppBar merupakan bagian yang berada di atas aplikasi. Pada aplikasi saya, AppBar digunakan untuk menampilkan judul Profil Siswa RPL 🚀.
4. Center
Center digunakan untuk membuat isi aplikasi berada di posisi tengah layar.
5. Container
Container berfungsi sebagai wadah untuk menampilkan dan mengatur isi. Saya menggunakan Container dengan ukuran tertentu, padding, warna, sudut yang melengkung, dan bayangan.
6. Text
Text digunakan untuk menampilkan tulisan. Pada aplikasi ini, Text digunakan untuk menampilkan nama, kelas, nomor absen, dan status belajar.
💻 Membuat Aplikasi Profil Siswa
Setelah memahami fungsi widget dasar, saya mencoba membuat aplikasi sederhana yang menampilkan identitas siswa RPL.
Informasi yang ditampilkan adalah:
👤 Nama: Eka Ramdani
🏫 Kelas: XI RPL 2
🔢 No. Absen: 8
🚀 Status: Sedang Belajar Flutter
Saya juga menambahkan beberapa perubahan pada tampilan supaya aplikasi tidak sama dengan contoh yang diberikan.
✨ Modifikasi Tampilan
Dalam aplikasi ini saya melakukan beberapa modifikasi, antara lain:
Menggunakan warna indigo pada AppBar.
Menggunakan warna teks yang berbeda-beda.
Membuat ukuran teks tidak semuanya sama.
Membuat Container dengan sudut melengkung.
Menambahkan efek bayangan pada Container.
Menambahkan emoji untuk membuat tampilan lebih menarik.
Menggunakan Column agar informasi tersusun dari atas ke bawah.
Membuat bagian status belajar dengan Container berbentuk kapsul.
🛠️ Tools yang Digunakan
Tools:
DartPad
Flutter
Bahasa pemrograman Dart
DartPad digunakan untuk menulis dan menjalankan kode sehingga saya tidak perlu membuat project Flutter secara manual di komputer.
👨💻 Kode Program
import 'package:flutter/material.dart';
void main() {
runApp(const ProfilSiswaApp());
}
class ProfilSiswaApp extends StatelessWidget {
const ProfilSiswaApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Profil Siswa RPL',
home: Scaffold(
backgroundColor: Colors.blueGrey[50],
appBar: AppBar(
title: const Text(
'Profil Siswa RPL 🚀',
style: TextStyle(
fontSize: 23,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
centerTitle: true,
backgroundColor: Colors.indigo,
),
body: Center(
child: Container(
width: 320,
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: Offset(0, 5),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'👨💻',
style: TextStyle(fontSize: 65),
),
const SizedBox(height: 15),
const Text(
'PROFIL SISWA',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
color: Colors.indigo,
),
),
const SizedBox(height: 20),
const Text(
'👤 Nama: Eka Ramdani',
style: TextStyle(
fontSize: 18,
color: Colors.deepPurple,
),
),
const SizedBox(height: 10),
const Text(
'🏫 Kelas: XI RPL 2',
style: TextStyle(
fontSize: 17,
color: Colors.teal,
),
),
const SizedBox(height: 10),
const Text(
'🔢 No. Absen: 8',
style: TextStyle(
fontSize: 16,
color: Colors.orange,
),
),
const SizedBox(height: 15),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 18,
vertical: 10,
),
decoration: BoxDecoration(
color: Colors.green[100],
borderRadius: BorderRadius.circular(30),
),
child: const Text(
'🚀 Status: Sedang Belajar Flutter',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.green,
),
),
),
],
),
),
),
),
);
}
}
📸 Dokumentasi Praktikum
Screenshot Kode
[Masukkan screenshot kode DartPad di sini]
Screenshot Hasil Aplikasi
[Masukkan screenshot hasil aplikasi di sini]
📝 Refleksi
Setelah melakukan praktikum ini, saya mulai memahami bagaimana sebuah aplikasi Flutter dijalankan. Saya mengetahui bahwa program dimulai dari fungsi main() kemudian menggunakan runApp() untuk menjalankan aplikasi.
Saya juga belajar bahwa tampilan Flutter dibuat menggunakan widget. Setiap widget mempunyai fungsi yang berbeda, tetapi dapat digabungkan untuk membuat tampilan yang lebih menarik.
Menurut saya, bagian yang cukup menarik adalah ketika kode yang ditulis dapat langsung menghasilkan tampilan aplikasi. Saya juga mencoba melakukan beberapa modifikasi seperti mengganti warna, ukuran teks, bentuk Container, dan menambahkan emoji.
Praktikum ini membuat saya lebih tertarik untuk mempelajari Flutter karena ternyata tampilan aplikasi bisa dibuat hanya dengan menyusun widget dan mengatur propertinya.
✅ Kesimpulan
Pada praktikum ini saya berhasil membuat aplikasi sederhana Profil Siswa RPL menggunakan Flutter.
Saya sudah mempelajari fungsi beberapa widget dasar seperti MaterialApp, Scaffold, AppBar, Center, Container, dan Text.
Dari praktikum ini saya mendapatkan pemahaman dasar tentang cara kerja Flutter dan bagaimana membuat tampilan sederhana menggunakan Dart. Selanjutnya saya ingin mencoba mempelajari widget lain agar dapat membuat aplikasi yang lebih interaktif dan menarik.
Komentar
Posting Komentar