Ikmal
👇
📱 Review Aplikasi Flutter: Profil Pribadi (Dark Theme) 1️⃣ Screenshot Tampilan Aplikasi
Tampilan halaman profil pribadi dengan tema gelap dan animasi halus saat muncul.
2️⃣ Potongan Kode Program
Berikut adalah kode utama yang digunakan untuk membuat tampilan profil pribadi dengan tema gelap dan efek animasi lembut:
import 'package:flutter/material.dart';
class ProfilPage extends StatelessWidget {
const ProfilPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Profil Pribadi',
style: TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/profile.jpg'),
),
const SizedBox(height: 10),
const Text(
'Muhamad Ikmal Nurfajar',
style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.w600),
),
const Text(
'Rekayasa Perangkat Lunak',
style: TextStyle(color: Colors.grey, fontSize: 16),
),
const SizedBox(height: 30),
Container(
decoration: BoxDecoration(
color: Colors.grey[900],
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.all(16),
child: const Column(
children: [
Icon(Icons.videogame_asset, color: Colors.blueAccent, size: 30),
SizedBox(height: 8),
Text(
'Hobiku',
style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 6),
Text(
'Saya suka bermain game strategi dan simulasi. Melalui game, '
'saya belajar kerja sama, berpikir cepat, dan mengambil keputusan dengan tepat.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white70),
),
],
),
),
],
),
),
);
}
}
3️⃣ Penjelasan Singkat
Aplikasi ini menampilkan profil pribadi dengan tema gelap dan efek animasi fade-in saat halaman dibuka.
Beberapa hal menarik dari kode ini:
🖤 Tema Gelap: Diatur lewat ThemeData(brightness: Brightness.dark) agar seluruh tampilan berwarna gelap.
🎞️ Animasi FadeTransition: Menggunakan AnimationController dan CurvedAnimation untuk memberikan efek muncul perlahan.
👤 CircleAvatar: Menampilkan foto profil dari aset lokal (assets/mlz.jpg).
💬 Card Informasi: Dua Container menampilkan bagian Hobiku dan Cita-cita Saya dengan gaya kartu modern.
📩 Tombol Interaktif: Tombol Hubungi Saya menampilkan SnackBar ketika ditekan.
💡 Kutipan Inspiratif: Diletakkan di bagian bawah untuk memberikan kesan personal.


0 Komentar:
Posting Komentar
Berlangganan Posting Komentar [Atom]
<< Beranda