Membuat Kartu Profil Monokrom dengan Flutter
🌑 Membuat Kartu Profil Monokrom dengan Flutter
Halo semuanya! 👋
Kali ini saya akan berbagi proyek Flutter sederhana namun keren — yaitu aplikasi kartu profil monokrom.
Tampilan hitam-putih ini memberikan kesan minimalis, elegan, dan profesional, cocok untuk latihan dasar Flutter bagi pemula.
🎯 Tujuan Proyek
Proyek ini bertujuan untuk melatih pemahaman tentang:
- Struktur dasar aplikasi Flutter (
MaterialApp,Scaffold,AppBar, dll) - Penggunaan tema gelap (dark mode)
- Penataan tata letak dengan Column, Card, dan Padding
- Interaksi sederhana menggunakan ElevatedButton dan AlertDialog
💻 Kode Lengkap Flutter
Berikut kode lengkap yang digunakan untuk membuat kartu profil monokrom ini:
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(
title: 'Kartu Profil Monokrom',
debugShowCheckedModeBanner: false,
theme: ThemeData.dark().copyWith(
primaryColor: Colors.white,
scaffoldBackgroundColor: Colors.black,
cardColor: const Color(0xFF1A1A1A),
colorScheme: const ColorScheme.dark(
primary: Colors.white,
secondary: Colors.grey,
),
textTheme: const TextTheme(
bodyMedium: TextStyle(color: Colors.white70),
),
),
home: const ProfilePage(),
);
}
}
class ProfilePage extends StatelessWidget {
const ProfilePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Profil Diri'),
backgroundColor: Colors.black,
centerTitle: true,
elevation: 1,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(20),
child: Column(
children: [
// --- Foto Profil ---
const CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/epan.jpg'),
),
const SizedBox(height: 10),
// --- Nama & Jurusan ---
const Text(
'Evan Raka Riadi',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const Text(
'Rekayasa Perangkat Lunak',
style: TextStyle(color: Colors.white70),
),
const SizedBox(height: 20),
// --- Hobi ---
Card(
color: const Color(0xFF1A1A1A),
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: const [
Text(
'Hobiku',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 8),
Text(
'Saya suka bermain game, terutama game strategi dan simulasi. '
'Melalui game, saya belajar tentang kerja sama, berpikir cepat, '
'dan bagaimana mengambil keputusan dengan tepat.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white70),
),
],
),
),
),
const SizedBox(height: 20),
// --- Cita-cita ---
Card(
color: const Color(0xFF1A1A1A),
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: const [
Text(
'Cita-cita Saya',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 8),
Text(
'Saya bercita-cita menjadi seorang anggota Dewan Perwakilan Rakyat (DPR) '
'yang dapat memperjuangkan hak masyarakat dan membawa perubahan '
'positif bagi bangsa dan negara.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white70),
),
],
),
),
),
const SizedBox(height: 20),
// --- Tombol Hubungi Saya ---
ElevatedButton.icon(
onPressed: () {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: const Color(0xFF1A1A1A),
title: const Text(
'Hubungi Saya',
style: TextStyle(color: Colors.white),
),
content: const Text(
'Email: ievanraka850@gmail.com\nInstagram: @epaanrakaa',
style: TextStyle(color: Colors.white70),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
child: const Text(
'Tutup',
style: TextStyle(color: Colors.white),
),
),
],
),
);
},
icon: const Icon(Icons.email_outlined, color: Colors.black),
label: const Text('Hubungi Saya'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
padding:
const EdgeInsets.symmetric(horizontal: 30, vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
const SizedBox(height: 20),
// --- Kutipan ---
const Text(
'“Jangan takut bermimpi besar, karena langkah kecil hari ini '
'adalah awal dari perubahan besar esok hari.”',
textAlign: TextAlign.center,
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.white60,
),
),
],
),
),
);
}
}
⚙️ Cara Kerja / Fungsi Kode
1. main() dan runApp() → Menjalankan aplikasi Flutter dengan widget utama MyApp.
2. MaterialApp → Menyediakan struktur dasar aplikasi berbasis Material Design.
Di sini digunakan tema gelap (dark theme) untuk menampilkan nuansa monokrom.
3. Scaffold dan AppBar → Membuat tampilan dasar halaman profil dengan judul di bagian atas.
4. CircleAvatar → Menampilkan foto profil berbentuk lingkaran.
5. Card → Menampilkan bagian “Hobi” dan “Cita-cita” dalam kotak dengan sudut membulat dan warna abu gelap.
6. Column & Padding → Mengatur tata letak vertikal dan memberi jarak antar elemen agar tampilan rapi.
7. ElevatedButton.icon + AlertDialog → Saat tombol “Hubungi Saya” ditekan, dialog muncul menampilkan informasi kontak.
8. Text, SizedBox, dan Divider (implisit) → Memberi jarak, teks, dan pemisahan antar bagian agar tampilan lebih terstruktur.
Secara keseluruhan, aplikasi ini bekerja dengan menyusun widget Flutter secara hierarkis untuk membentuk tampilan profil yang elegan dan interaktif dalam nuansa monokrom.
🧩 Widget yang Digunakan
Berikut beberapa widget penting di dalam proyek ini:
- MaterialApp, Scaffold, dan AppBar → Struktur dasar aplikasi.
- CircleAvatar → Menampilkan foto profil berbentuk lingkaran.
- Card → Untuk menampilkan data “Hobi” dan “Cita-cita” dengan gaya elegan.
- ElevatedButton.icon → Tombol dengan ikon dan teks.
- AlertDialog → Menampilkan informasi kontak saat tombol ditekan.
- Text, SizedBox, dan Padding → Untuk tata letak dan spasi antar elemen.
🖤 Hasil Akhir
Aplikasi ini menampilkan profil pribadi dalam tema monokrom yang terlihat sederhana namun elegan.
Tombol “Hubungi Saya” membuatnya terasa interaktif dan personal.
Kamu bisa menyesuaikan warna, teks, atau gambar agar sesuai dengan profilmu sendiri.
📱 Penutup
Proyek ini sangat cocok bagi pemula yang ingin memahami konsep dasar layout dan tema di Flutter.
Dengan sedikit sentuhan kreativitas, kamu bisa menjadikannya portofolio pribadi berbasis mobile!
Kalau kamu suka desain minimalis seperti ini, jangan lupa untuk mencoba variasi warna, animasi, atau efek gradient agar tampil lebih hidup. 🚀
Komentar
Posting Komentar