Membuat widget
Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana.
import 'package:flutter/material.dart';
void main() => runApp(const MyElegantProfileApp());
class MyElegantProfileApp extends StatelessWidget {
const MyElegantProfileApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Profil Revan Ramadhan',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
fontFamily: 'Poppins',
useMaterial3: true,
),
home: const ProfilePage(),
);
}
}
class ProfilePage extends StatefulWidget {
const ProfilePage({super.key});
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _fadeIn;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
)..forward();
_fadeIn = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
const Color accentColor = Color(0xFF00E6C3);
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF0E0E0E), Color(0xFF1B1B1B)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: FadeTransition(
opacity: _fadeIn,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Foto profil
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: accentColor.withOpacity(0.3),
blurRadius: 20,
spreadRadius: 2,
),
],
),
child: const CircleAvatar(
radius: 65,
backgroundImage: AssetImage('assets/mizan.jpg'),
),
),
const SizedBox(height: 20),
// Nama & jurusan
const Text(
'Mizan Achmad Alfahrezi',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: accentColor,
),
),
const SizedBox(height: 6),
const Text(
'Jurusan: Rekayasa Perangkat Lunak',
style: TextStyle(
fontSize: 15,
color: Colors.white70,
),
),
const SizedBox(height: 30),
// Kartu Hobi
const ProfileSection(
title: 'Hobiku',
content: 'Saya suka bermain bola.',
icon: Icons.sports_soccer,
),
const SizedBox(height: 20),
// Kartu Cita-cita
const ProfileSection(
title: 'Cita-cita Saya',
content: 'Ingin menjadi atlet sepak bola.',
icon: Icons.star,
),
const SizedBox(height: 35),
// Tombol
ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.chat_bubble_outline,
color: Colors.black),
label: const Text(
'Hubungi Saya',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: accentColor,
padding: const EdgeInsets.symmetric(
horizontal: 40,
vertical: 14,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
elevation: 8,
shadowColor: accentColor.withOpacity(0.5),
),
),
const SizedBox(height: 30),
// Kutipan motivasi
const Text(
'“Terus belajar, jangan menyerah, dan tetap semangat!”',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white60,
fontStyle: FontStyle.italic,
fontSize: 14,
),
),
],
),
),
),
),
),
);
}
}
// Widget elegan untuk bagian Hobiku dan Cita-cita
class ProfileSection extends StatelessWidget {
final String title;
final String content;
final IconData icon;
const ProfileSection({
super.key,
required this.title,
required this.content,
required this.icon,
});
@override
Widget build(BuildContext context) {
const Color accentColor = Color(0xFF00E6C3);
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color.fromARGB(255, 50, 50, 50),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: accentColor.withOpacity(0.15),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
),
child: Column(
children: [
Icon(icon, color: accentColor, size: 30),
const SizedBox(height: 10),
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: accentColor,
),
),
const SizedBox(height: 8),
Text(
content,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white70,
fontSize: 14,
height: 1.5,
),
),
],
),
);
}
}
Hasilnya ini teman teman✌🏻
Komentar
Posting Komentar