import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Kartu Profil - Aku & Hobiku',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
home: ProfilePage(),
);
}
}
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue[50],
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: Text("Kartu Profil — Aku & Hobiku"),
centerTitle: true,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Center(
child: Column(
children: [
// Foto Profil (dari asset lokal)
CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/azzura.jpg'),
),
SizedBox(height: 12),
// Nama
Text(
"Azzura Lavasha Dewi",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue[900],
),
),
// Jurusan
Text(
"XI RPL 1 — SMKN 1 Banjar",
style: TextStyle(
fontSize: 16,
color: Colors.grey[700],
),
),
SizedBox(height: 20),
// Deskripsi Hobi dan Cita-cita
Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tentang Saya",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.lightBlue[800],
),
),
SizedBox(height: 8),
Text(
"Hobi saya adalah membaca novel 📖. Saya suka menelusuri cerita-cerita baru dan belajar dari setiap tokoh di dalamnya. "
"Cita-cita saya adalah menjadi seorang pengusaha yang sukses dan bermanfaat bagi banyak orang 💼.",
style: TextStyle(fontSize: 15, height: 1.4),
textAlign: TextAlign.justify,
),
],
),
),
),
SizedBox(height: 20),
// Hobi (pakai Chip)
Wrap(
spacing: 8,
children: [
Chip(
avatar: Icon(Icons.book, size: 18, color: Colors.blue),
label: Text("Membaca"),
backgroundColor: Colors.lightBlue[100],
),
Chip(
avatar: Icon(Icons.business_center, size: 18, color: Colors.blue),
label: Text("Berwirausaha"),
backgroundColor: Colors.lightBlue[100],
),
],
),
SizedBox(height: 20),
// Tombol Hubungi Saya
ElevatedButton.icon(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Hubungi Saya"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: Icon(Icons.email, color: Colors.blue),
title: Text("azzuradewi91@gmail.com"),
),
ListTile(
leading: Icon(Icons.phone, color: Colors.blue),
title: Text("+62 812 1185 8212"),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("Tutup"),
),
],
);
},
);
},
icon: Icon(Icons.mail_outline),
label: Text("Hubungi Saya"),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.lightBlue,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
shape: StadiumBorder(),
),
),
SizedBox(height: 20),
Text(
"Dibuat dengan Flutter 💙 oleh Azzura",
style: TextStyle(color: Colors.grey[700]),
),
],
),
),
),
);
}
}
Berikut penjelasan singkat tentang cara kerja kode Flutter di atas 👇
🧩 Penjelasan Kode
Kode ini membuat aplikasi Flutter sederhana bernama “Kartu Profil — Aku & Hobiku” yang menampilkan profil pribadi dengan foto, nama, jurusan, hobi, dan tombol kontak.
🧠 Bagian-bagian Utama:
1️⃣ Fungsi main()
void main() {
runApp(MyApp());
}
👉 Merupakan titik awal program.
runApp(MyApp()) menjalankan aplikasi dengan widget utama MyApp.
2️⃣ Kelas MyApp
class MyApp extends StatelessWidget { ... }
👉 Menjadi wadah utama aplikasi.
Menggunakan MaterialApp untuk memberikan tampilan bergaya Material Design dan menentukan halaman utama yaitu ProfilePage().
3️⃣ Kelas ProfilePage
class ProfilePage extends StatelessWidget { ... }
👉 Halaman utama yang menampilkan isi profil menggunakan Scaffold:
4️⃣ Isi Halaman Profil
Berisi beberapa elemen penting:
-
CircleAvatar → Menampilkan foto profil dari folder lokal (assets/azzura.jpg).
-
Text → Menampilkan nama dan jurusan.
-
Card → Berisi deskripsi diri, hobi, dan cita-cita.
-
Wrap + Chip → Menampilkan daftar hobi dalam bentuk label kecil dengan ikon.
-
ElevatedButton.icon → Tombol “Hubungi Saya” yang saat ditekan menampilkan dialog kontak (email dan nomor telepon).
5️⃣ Dialog Kontak
showDialog(
context: context,
builder: (context) { ... }
);
👉 Menampilkan jendela kecil (popup) berisi informasi kontak dan tombol “Tutup”.
6️⃣ Bagian Penutup
Text("Dibuat dengan Flutter 💙 oleh Azzura")
👉 Menampilkan teks penutup di bagian bawah halaman.
🎨 Kesimpulan
Aplikasi ini menampilkan kartu profil interaktif dengan desain sederhana dan warna biru lembut.
Fungsinya untuk memperkenalkan diri secara digital — menampilkan foto, biodata, hobi, serta kontak yang bisa diakses melalui tombol.
link:https://zg5e06o9g5f0.zapp.page/#/
Komentar
Posting Komentar