🚀 Praktikum Flutter Seri 2 — Struktur Project dan main.dart
👨💻 Identitas
Nama: Rafi Nugraha
Kelas: XI RPL 2
No. Absen: 22
🎯 Tujuan Praktikum
Pada Praktikum Flutter Seri 2 ini, saya mempelajari struktur dasar project Flutter dan fungsi main.dart.
Tujuan dari praktikum ini adalah agar saya dapat memahami bagaimana sebuah aplikasi Flutter dijalankan, mulai dari fungsi main() sampai menghasilkan tampilan aplikasi.
Alur dasar yang dipelajari adalah:
main() → runApp() → MaterialApp → Scaffold → AppBar → Center → Container → Text
Selain memahami widget dasar, saya juga melakukan beberapa modifikasi pada tampilan agar aplikasi tidak sama persis dengan contoh yang diberikan.
🛠️ Tools yang Digunakan
Dalam praktikum ini saya menggunakan:
💙 Flutter — framework untuk membuat aplikasi.
💻 Dart — bahasa pemrograman yang digunakan Flutter.
📝 Visual Studio Code — untuk membuat dan mengedit project Flutter.
🌐 DartPad — sebagai alternatif untuk mencoba kode Flutter secara online.
🧪 Flutter Test — untuk menguji apakah widget pada aplikasi berjalan sesuai dengan yang diharapkan.
📱 Membuat Aplikasi Profil Siswa RPL
Pada praktikum ini saya membuat aplikasi sederhana dengan nama Profil Siswa RPL.
Aplikasi ini menampilkan informasi siswa dalam sebuah kartu dengan desain yang sederhana dan modern.
Informasi yang ditampilkan antara lain:
👤 Nama siswa
🏫 Kelas
🔢 Nomor absen
🚀 Status belajar Flutter
Pada bagian atas terdapat header berwarna biru dengan tulisan RPL STUDENT PROFILE.
Karena aplikasi ini dibuat tanpa menggunakan foto eksternal, bagian profil menggunakan ikon orang sebagai pengganti foto. Dengan demikian, aplikasi tidak memerlukan folder assets maupun file gambar tambahan.
🎨 Desain dan Layout Aplikasi
Tampilan aplikasi dibuat dalam bentuk sebuah profile card yang berada di tengah halaman.
Gambaran sederhananya:
┌─────────────────────────────────┐
│ Profil Siswa RPL │
├─────────────────────────────────┤
│ │
│ RPL STUDENT PROFILE 💻 │
│ │
│ 👤 │
│ │
│ Rafi Nugraha │
│ XI RPL 2 │
│ │
│ ─────────────────────────────── │
│ │
│ 👤 Nama │
│ Rafi Nugraha │
│ │
│ 🏫 Kelas │
│ XI RPL 2 │
│ │
│ 🔢 No. Absen │
│ 22 │
│ │
│ ┌─────────────────────────────┐ │
│ │ 🚀 Status Belajar │ │
│ │ Sedang Belajar Flutter │ │
│ └─────────────────────────────┘ │
│ │
│ "Terus belajar dan berkembang │
│ setiap hari!" │
│ │
│ ┌─────────────────────────────┐ │
│ │ Flutter Student │ │
│ │ Build • Learn • Create │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
💻 Source Code main.dart
Berikut adalah kode yang digunakan untuk membuat aplikasi:
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',
theme: ThemeData(
useMaterial3: true,
fontFamily: 'Arial',
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
),
home: const ProfilSiswaPage(),
);
}
}
class ProfilSiswaPage extends StatelessWidget {
const ProfilSiswaPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF3F7FC),
appBar: AppBar(
title: const Text(
'Profil Siswa RPL',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
body: SingleChildScrollView(
child: Center(
child: Container(
width: 370,
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(28),
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 15,
offset: Offset(0, 7),
),
],
),
child: Column(
children: [
// Header
Container(
height: 170,
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(28),
topRight: Radius.circular(28),
),
),
child: const Center(
child: Text(
'RPL STUDENT PROFILE 💻',
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
letterSpacing: 1,
),
),
),
),
// Icon Profil
Transform.translate(
offset: const Offset(0, -55),
child: Container(
width: 120,
height: 120,
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Container(
decoration: BoxDecoration(
color: Colors.blue.shade100,
shape: BoxShape.circle,
),
child: const Icon(
Icons.person,
size: 70,
color: Colors.blue,
),
),
),
),
// Nama
Transform.translate(
offset: const Offset(0, -35),
child: const Column(
children: [
Text(
'Rafi Nugraha',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Color(0xFF172B4D),
),
),
SizedBox(height: 8),
Text(
'XI RPL 2',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
],
),
),
// Data Siswa
Padding(
padding: const EdgeInsets.fromLTRB(
25,
0,
25,
25,
),
child: Column(
children: [
const Divider(),
const SizedBox(height: 10),
const InfoItem(
icon: Icons.person,
title: 'Nama',
value: 'Rafi Nugraha',
),
const SizedBox(height: 15),
const InfoItem(
icon: Icons.school,
title: 'Kelas',
value: 'XI RPL 2',
),
const SizedBox(height: 15),
const InfoItem(
icon: Icons.confirmation_number,
title: 'No. Absen',
value: '25',
),
const SizedBox(height: 20),
// Status Belajar
Container(
width: double.infinity,
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.blue.shade100,
),
),
child: const Row(
children: [
Icon(
Icons.rocket_launch,
color: Colors.blue,
size: 32,
),
SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Status Belajar',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
),
),
SizedBox(height: 4),
Text(
'Sedang Belajar Flutter 🚀',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
],
),
),
],
),
),
const SizedBox(height: 22),
// Motivasi
const Text(
'"Terus belajar dan berkembang setiap hari!"',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
color: Colors.grey,
),
),
const SizedBox(height: 20),
// Footer
Container(
width: double.infinity,
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(16),
),
child: const Column(
children: [
Icon(
Icons.flutter_dash,
color: Colors.white,
size: 35,
),
SizedBox(height: 5),
Text(
'Flutter Student',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 3),
Text(
'Build • Learn • Create',
style: TextStyle(
color: Colors.white70,
fontSize: 12,
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
}
// Widget untuk informasi siswa
class InfoItem extends StatelessWidget {
final IconData icon;
final String title;
final String value;
const InfoItem({
super.key,
required this.icon,
required this.title,
required this.value,
});
@override
Widget build(BuildContext context) {
return Row(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(14),
),
child: Icon(
icon,
color: Colors.blue,
size: 25,
),
),
const SizedBox(width: 15),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 13,
color: Colors.grey,
),
),
const SizedBox(height: 3),
Text(
value,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
],
);
}
}
🧩 Penjelasan Widget
main()
main() merupakan titik awal ketika aplikasi Flutter dijalankan.
void main() {
runApp(const ProfilSiswaApp());
}
Fungsi tersebut menjalankan widget utama bernama ProfilSiswaApp.
runApp()
runApp() digunakan untuk menjalankan widget utama aplikasi.
Pada program ini:
runApp(const ProfilSiswaApp());
artinya Flutter menjalankan aplikasi yang dibuat dalam class ProfilSiswaApp.
MaterialApp
MaterialApp menjadi dasar aplikasi Flutter dan digunakan untuk mengatur tema serta halaman utama aplikasi.
Pada aplikasi ini digunakan:
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Profil Siswa RPL',
)
Scaffold
Scaffold digunakan sebagai kerangka utama halaman.
Di dalam Scaffold terdapat:
AppBarbody
AppBar
AppBar digunakan untuk menampilkan judul aplikasi pada bagian atas.
AppBar(
title: const Text('Profil Siswa RPL'),
)
Center
Center digunakan agar kartu profil berada di bagian tengah layar.
Center(
child: Container(
...
),
)
Container
Container digunakan untuk membuat kartu profil, header, icon profil, status belajar, dan footer.
Container juga digunakan untuk mengatur:
ukuran
warna
padding
margin
border radius
shadow
Text
Widget Text digunakan untuk menampilkan seluruh informasi berupa tulisan seperti:
Nama
Kelas
Nomor absen
Status belajar
Pesan motivasi
Row dan Column
Row digunakan untuk menyusun widget secara horizontal, sedangkan Column digunakan untuk menyusun widget secara vertikal.
Keduanya digunakan untuk membuat layout informasi siswa agar lebih rapi.
Icon
Widget Icon digunakan sebagai pengganti foto profil dan sebagai simbol untuk setiap informasi.
Contohnya:
Icons.person
Icons.school
Icons.confirmation_number
Icons.rocket_launch
✨ Modifikasi yang Saya Lakukan
Agar tidak sama persis dengan contoh dasar, saya melakukan beberapa modifikasi:
🔵 Mengubah tema menjadi warna biru.
💻 Menambahkan tulisan RPL STUDENT PROFILE.
👤 Menggunakan ikon profil berbentuk lingkaran.
📋 Membuat informasi siswa menggunakan
Row.🎨 Menambahkan gradient pada header.
🔲 Membuat kartu dengan sudut membulat.
🌑 Menambahkan efek shadow.
🚀 Membuat status belajar dalam kotak khusus.
💬 Menambahkan kalimat motivasi.
🦋 Menambahkan footer Flutter Student.
Modifikasi tersebut membuat aplikasi terlihat lebih modern dan berbeda dari tampilan dasar Flutter.
🧪 Widget Test
Selain membuat tampilan aplikasi, saya juga menyesuaikan file widget_test.dart dengan aplikasi yang dibuat.
Test digunakan untuk memastikan beberapa teks penting pada aplikasi berhasil ditemukan.
Contohnya:
expect(
find.text('Profil Siswa RPL'),
findsOneWidget,
);
Kode tersebut digunakan untuk mengecek apakah tulisan Profil Siswa RPL terdapat pada aplikasi.
Beberapa bagian yang diuji adalah:
Profil Siswa RPLRPL STUDENT PROFILE 💻Rafi NugrahaXI RPL 225Status BelajarSedang Belajar Flutter 🚀Flutter Student
Dengan adanya widget test, saya dapat memastikan bahwa elemen utama pada aplikasi tampil sesuai dengan yang diharapkan.
📸 Dokumentasi Praktikum
Screenshot Kode
Screenshot Hasil Aplikasi
📝 Refleksi
Setelah menyelesaikan praktikum ini, saya menjadi lebih memahami struktur dasar aplikasi Flutter.
Saya mengetahui bahwa program Flutter dimulai dari fungsi main(), kemudian runApp() menjalankan widget utama. Selanjutnya MaterialApp digunakan sebagai dasar aplikasi dan Scaffold digunakan untuk membuat struktur halaman.
Saya juga belajar bahwa tampilan Flutter dibangun menggunakan widget. Dengan menggabungkan AppBar, Center, Container, Text, Row, Column, dan Icon, saya dapat membuat tampilan profil siswa yang lebih menarik.
Selain itu, saya belajar melakukan modifikasi pada warna, ukuran, bentuk, jarak, dan layout sehingga aplikasi tidak hanya mengikuti contoh dasar.
Saya juga memahami fungsi sederhana dari widget test untuk memeriksa apakah elemen-elemen penting pada aplikasi sudah tampil dengan benar.
🎯 Kesimpulan
Praktikum Flutter Seri 2 memberikan pemahaman mengenai struktur project dan fungsi main.dart dalam aplikasi Flutter.
Melalui pembuatan aplikasi Profil Siswa RPL, saya dapat mempraktikkan widget dasar seperti MaterialApp, Scaffold, AppBar, Center, Container, dan Text.
Saya juga menggunakan beberapa widget tambahan seperti Row, Column, dan Icon untuk membuat layout yang lebih menarik.
Dari praktikum ini saya memahami bahwa Flutter menggunakan konsep widget sebagai dasar dalam membangun antarmuka aplikasi.
Dengan memahami struktur dasar tersebut, saya dapat melanjutkan pembelajaran Flutter ke tahap berikutnya dan mulai membuat aplikasi yang lebih kompleks.
RUN → PAHAMI → MODIFIKASI → TEST → SCREENSHOT → POSTING → KUMPULKAN 🚀💻📱
Komentar
Posting Komentar