343 lines
11 KiB
Dart
343 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'dart:ui' as ui;
|
|
import 'laundry.dart';
|
|
import '../login.dart';
|
|
|
|
class ProfilePage extends StatefulWidget {
|
|
final Map<String, dynamic> userData;
|
|
final bool isTab;
|
|
const ProfilePage({super.key, required this.userData, this.isTab = false});
|
|
|
|
@override
|
|
State<ProfilePage> createState() => _ProfilePageState();
|
|
}
|
|
|
|
class _ProfilePageState extends State<ProfilePage> {
|
|
// --- Tailwind DESIGN TOKENS ---
|
|
final Color primary = const Color(0xFF0058BE);
|
|
final Color onPrimary = const Color(0xFFFFFFFF);
|
|
final Color primaryContainer = const Color(0xFF2170E4);
|
|
final Color background = const Color(0xFFF7F9FB);
|
|
final Color surface = const Color(0xFFF7F9FB);
|
|
final Color surfaceContainerLowest = const Color(0xFFFFFFFF);
|
|
final Color surfaceContainerLow = const Color(0xFFF0F4F8);
|
|
final Color onSurface = const Color(0xFF191C1E);
|
|
final Color onSurfaceVariant = const Color(0xFF424754);
|
|
final Color outlineVariant = const Color(0xFFC2C6D6);
|
|
final Color outline = const Color(0xFF727785);
|
|
final Color error = const Color(0xFFBA1A1A);
|
|
final Color primaryFixed = const Color(0xFFD8E2FF);
|
|
final Color surfaceContainerHigh = const Color(0xFFE6E8EA);
|
|
final Color successGreen = const Color(0xFF10B981);
|
|
final Color dangerRed = const Color(0xFFBA1A1A);
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
String displayName = widget.userData['user']?['name'] ?? 'User';
|
|
String email = widget.userData['user']?['email'] ?? "Tidak ada email";
|
|
|
|
Widget content = Column(
|
|
children: [
|
|
_buildAppBar(),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
_buildProfileHero(displayName, email),
|
|
const SizedBox(height: 24),
|
|
_buildMenuList(context),
|
|
const SizedBox(height: 32),
|
|
_buildVersionFooter(),
|
|
const SizedBox(height: 24),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
|
|
if (widget.isTab) return content;
|
|
|
|
return Scaffold(
|
|
backgroundColor: surface,
|
|
body: content,
|
|
bottomNavigationBar: _buildBottomNav(context),
|
|
);
|
|
}
|
|
|
|
Widget _buildAppBar() {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: surface.withOpacity(0.9),
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: const Color(0xFFE6E8EA).withOpacity(0.5),
|
|
width: 1.0,
|
|
),
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
bottom: false,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFFD8E2FF),
|
|
shape: BoxShape.circle,
|
|
),
|
|
clipBehavior: Clip.hardEdge,
|
|
child: Image.asset(
|
|
'assets/app_icon.png',
|
|
fit: BoxFit.cover,
|
|
errorBuilder: (context, error, stackTrace) => Icon(
|
|
Icons.local_laundry_service_rounded,
|
|
color: primary,
|
|
size: 20),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text("My Laundry",
|
|
style: GoogleFonts.inter(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: primary,
|
|
)),
|
|
],
|
|
),
|
|
const SizedBox(width: 48),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProfileHero(String name, String email) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
gradient: const LinearGradient(
|
|
colors: [Color(0xFF2170E4), Color(0xFF004395)],
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
),
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, 2))
|
|
],
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Positioned(
|
|
right: -16,
|
|
top: -16,
|
|
child: Container(
|
|
width: 96,
|
|
height: 96,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.white.withOpacity(0.05),
|
|
),
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 64,
|
|
height: 64,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.3), width: 2),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05), blurRadius: 2)
|
|
],
|
|
),
|
|
child: CircleAvatar(
|
|
backgroundColor: Colors.white,
|
|
child: Icon(Icons.person, color: primary, size: 40),
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
name,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.white,
|
|
letterSpacing: -0.5),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
email,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 13, color: Colors.white.withOpacity(0.9)),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
)
|
|
],
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMenuList(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
_buildLogoutButton(context),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildLogoutButton(BuildContext context) {
|
|
return Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: () async {
|
|
final prefs = await SharedPreferences.getInstance();
|
|
await prefs.remove('userData');
|
|
if (!context.mounted) return;
|
|
Navigator.of(context).pushAndRemoveUntil(
|
|
MaterialPageRoute(builder: (_) => const LoginPage()),
|
|
(route) => false);
|
|
},
|
|
borderRadius: BorderRadius.circular(12),
|
|
highlightColor: error.withOpacity(0.1),
|
|
splashColor: error.withOpacity(0.05),
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(vertical: 14),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(color: outlineVariant.withOpacity(0.3)),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.logout, color: error, size: 20),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
"Keluar",
|
|
style: GoogleFonts.inter(
|
|
fontSize: 14, fontWeight: FontWeight.w500, color: error),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildVersionFooter() {
|
|
return Center(
|
|
child: Text(
|
|
"",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w500,
|
|
letterSpacing: 0.5,
|
|
color: onSurfaceVariant.withOpacity(0.4),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBottomNav(BuildContext context) {
|
|
return ClipRect(
|
|
child: BackdropFilter(
|
|
filter: ui.ImageFilter.blur(sigmaX: 10, sigmaY: 10),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: surface.withOpacity(0.9),
|
|
border:
|
|
Border(top: BorderSide(color: outlineVariant.withOpacity(0.1))),
|
|
),
|
|
child: SafeArea(
|
|
child: SizedBox(
|
|
height: 64,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
_navItem(Icons.home_rounded, "Beranda", false, () {
|
|
Navigator.popUntil(context, (route) => route.isFirst);
|
|
}),
|
|
_navItem(Icons.add_circle, "Input", false, () {
|
|
Navigator.pushReplacement(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (_) =>
|
|
LaundryPage(userData: widget.userData)),
|
|
);
|
|
}),
|
|
_navItem(Icons.person_rounded, "Profil", true, () {}),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _navItem(
|
|
IconData icon, String label, bool isActive, VoidCallback onTap) {
|
|
return Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
splashColor: Colors.transparent,
|
|
highlightColor: Colors.transparent,
|
|
child: SizedBox(
|
|
width: 64,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(icon,
|
|
size: 24, color: isActive ? primary : onSurfaceVariant),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
label,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 10,
|
|
fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
|
|
color: isActive ? primary : onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|