updates
This commit is contained in:
Wowieee4
+390
-144
@@ -1,19 +1,18 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:animate_do/animate_do.dart';
|
||||
import '../../../core/secure_storage.dart';
|
||||
import '../../auth/presentation/login_screen.dart';
|
||||
|
||||
class GuardianDashboardScreen extends StatelessWidget {
|
||||
const GuardianDashboardScreen({super.key});
|
||||
|
||||
Future<void> _handleLogout(BuildContext context) async {
|
||||
Future<void> _logout(BuildContext ctx) async {
|
||||
await SecureStorage().deleteToken();
|
||||
if (context.mounted) {
|
||||
if (ctx.mounted) {
|
||||
Navigator.pushAndRemoveUntil(
|
||||
context,
|
||||
ctx,
|
||||
MaterialPageRoute(builder: (_) => const LoginScreen()),
|
||||
(route) => false, // Bersihin tumpukan screen
|
||||
(_) => false,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -22,156 +21,403 @@ class GuardianDashboardScreen extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF8FAFC),
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
title: FadeInDown(
|
||||
child: Text('Guardian Command', style: GoogleFonts.outfit(color: const Color(0xFF0F172A), fontWeight: FontWeight.bold, fontSize: 24)),
|
||||
),
|
||||
actions: [
|
||||
FadeInDown(
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.logout_rounded, color: Color(0xFFDC2626)),
|
||||
tooltip: 'Logout',
|
||||
onPressed: () => _handleLogout(context),
|
||||
),
|
||||
body: Column(children: [
|
||||
_buildTopBar(context),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
_buildPageHeader(),
|
||||
const SizedBox(height: 18),
|
||||
_buildKpiRow(),
|
||||
const SizedBox(height: 18),
|
||||
_buildMainGrid(context),
|
||||
]),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 1. KARTU STATUS USER
|
||||
FadeInUp(
|
||||
duration: const Duration(milliseconds: 600),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(colors: [Color(0xFF2563EB), Color(0xFF1D4ED8)]),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
boxShadow: [
|
||||
BoxShadow(color: const Color(0xFF2563EB).withValues(alpha: 0.3), blurRadius: 20, offset: const Offset(0, 10))
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: const BoxDecoration(color: Colors.white24, shape: BoxShape.circle),
|
||||
child: const CircleAvatar(
|
||||
radius: 30,
|
||||
backgroundColor: Colors.white,
|
||||
child: Icon(Icons.person, size: 36, color: Color(0xFF2563EB)),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('User Pantauan', style: GoogleFonts.inter(color: Colors.blue[100], fontSize: 14)),
|
||||
Text('Sistem Aktif', style: GoogleFonts.outfit(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.location_on, color: Colors.white70, size: 16),
|
||||
const SizedBox(width: 4),
|
||||
Text('Melacak lokasi...', style: GoogleFonts.inter(color: Colors.white70, fontSize: 12)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// 2. QUICK ACTIONS
|
||||
FadeInUp(
|
||||
delay: const Duration(milliseconds: 200),
|
||||
child: Text('Aksi Cepat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FadeInUp(
|
||||
delay: const Duration(milliseconds: 300),
|
||||
child: Row(
|
||||
children: [
|
||||
_buildQuickAction(Icons.videocam_outlined, 'Live View', const Color(0xFF10B981)),
|
||||
const SizedBox(width: 16),
|
||||
_buildQuickAction(Icons.phone_in_talk, 'Hubungi', const Color(0xFFF59E0B)),
|
||||
const SizedBox(width: 16),
|
||||
_buildQuickAction(Icons.settings_voice, 'Voice Conf', const Color(0xFF8B5CF6)),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// 3. SETTINGAN DEVICE USER
|
||||
FadeInUp(
|
||||
delay: const Duration(milliseconds: 400),
|
||||
child: Text('Konfigurasi Perangkat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FadeInUp(
|
||||
delay: const Duration(milliseconds: 500),
|
||||
child: _buildSettingTile(Icons.gamepad_outlined, 'Hardware Shortcuts', 'Atur fungsi tombol volume hp user'),
|
||||
),
|
||||
FadeInUp(
|
||||
delay: const Duration(milliseconds: 600),
|
||||
child: _buildSettingTile(Icons.spatial_audio_outlined, 'Sensitivitas AI', 'Atur jarak deteksi rintangan'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildQuickAction(IconData icon, String label, Color color) {
|
||||
return Expanded(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: Colors.grey.withValues(alpha: 0.1)),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.02), blurRadius: 10, offset: const Offset(0, 4))],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(icon, size: 32, color: color),
|
||||
const SizedBox(height: 8),
|
||||
Text(label, style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w600, color: const Color(0xFF475569))),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSettingTile(IconData icon, String title, String subtitle) {
|
||||
Widget _buildTopBar(BuildContext ctx) {
|
||||
return Container(
|
||||
height: 52,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.white,
|
||||
border: Border(bottom: BorderSide(color: Color(0xFFE2E8F0), width: 0.5)),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 26,
|
||||
height: 26,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF1A56DB),
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
child: const Icon(Icons.navigation_rounded, color: Colors.white, size: 14),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text('WalkGuide', style: GoogleFonts.outfit(fontSize: 14, fontWeight: FontWeight.w600)),
|
||||
const SizedBox(width: 20),
|
||||
_navItem('Overview', true),
|
||||
_navItem('Live Track', false),
|
||||
_navItem('Settings', false),
|
||||
_navItem('Alerts', false),
|
||||
const Spacer(),
|
||||
TextButton.icon(
|
||||
onPressed: () => _logout(ctx),
|
||||
icon: const Icon(Icons.logout, size: 14, color: Color(0xFF64748B)),
|
||||
label: Text('Sign out', style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF64748B))),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Row(children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text('Guardian', style: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w600)),
|
||||
Text('guardian@walkguide.com',
|
||||
style: GoogleFonts.inter(fontSize: 10, color: const Color(0xFF94A3B8))),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
CircleAvatar(
|
||||
radius: 14,
|
||||
backgroundColor: const Color(0xFF1A56DB),
|
||||
child: Text('GD',
|
||||
style: GoogleFonts.inter(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w600)),
|
||||
),
|
||||
]),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _navItem(String label, bool active) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(right: 2),
|
||||
child: TextButton(
|
||||
onPressed: () {},
|
||||
style: TextButton.styleFrom(
|
||||
backgroundColor: active ? const Color(0xFFF1F5F9) : Colors.transparent,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 13,
|
||||
fontWeight: active ? FontWeight.w600 : FontWeight.w400,
|
||||
color: active ? const Color(0xFF0F172A) : const Color(0xFF64748B),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPageHeader() {
|
||||
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text('Guardian Command',
|
||||
style: GoogleFonts.outfit(fontSize: 20, fontWeight: FontWeight.w600, color: const Color(0xFF0F172A))),
|
||||
Text('Thursday, April 23, 2026 — Real-time monitoring active',
|
||||
style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF64748B))),
|
||||
]);
|
||||
}
|
||||
|
||||
Widget _buildKpiRow() {
|
||||
final kpis = [
|
||||
{'label': 'User Status', 'val': '● Active', 'sub': 'Walking — Jl. Kenangan SBY', 'isGreen': true},
|
||||
{'label': 'Battery Level', 'val': '85%', 'sub': 'Good — Est. 6h left', 'isGreen': false},
|
||||
{'label': 'AI Alerts Today', 'val': '12', 'sub': '3 obstacles detected', 'isGreen': false},
|
||||
{'label': 'Alert Distance', 'val': '2.5m', 'sub': 'Haptic feedback on', 'isGreen': false},
|
||||
];
|
||||
return Row(
|
||||
children: kpis.map((k) {
|
||||
final isLast = kpis.indexOf(k) == kpis.length - 1;
|
||||
return Expanded(
|
||||
child: Container(
|
||||
margin: EdgeInsets.only(right: isLast ? 0 : 10),
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: const Color(0xFFE2E8F0), width: 0.5),
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(k['label'] as String,
|
||||
style: GoogleFonts.inter(fontSize: 11, color: const Color(0xFF94A3B8), letterSpacing: 0.04)),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
k['val'] as String,
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: (k['isGreen'] as bool) ? const Color(0xFF16A34A) : const Color(0xFF0F172A),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Text(k['sub'] as String,
|
||||
style: GoogleFonts.inter(fontSize: 11, color: const Color(0xFF1A56DB))),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMainGrid(BuildContext ctx) {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(children: [
|
||||
_buildMapCard(),
|
||||
const SizedBox(height: 14),
|
||||
_buildActivityCard(),
|
||||
]),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
SizedBox(
|
||||
width: 240,
|
||||
child: Column(children: [
|
||||
_buildUserCard(),
|
||||
const SizedBox(height: 12),
|
||||
_buildActionsCard(),
|
||||
]),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMapCard() {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: Colors.grey.withValues(alpha: 0.1)),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.02), blurRadius: 8, offset: const Offset(0, 2))],
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: const Color(0xFFE2E8F0), width: 0.5),
|
||||
),
|
||||
child: ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
leading: Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(color: const Color(0xFFF1F5F9), borderRadius: BorderRadius.circular(12)),
|
||||
child: Icon(icon, color: const Color(0xFF0F172A)),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 12),
|
||||
child: Row(children: [
|
||||
Text('Live location', style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0x1A16A34A),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 5,
|
||||
height: 5,
|
||||
decoration: const BoxDecoration(color: Color(0xFF16A34A), shape: BoxShape.circle),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text('Live',
|
||||
style: GoogleFonts.inter(fontSize: 10, color: const Color(0xFF16A34A), fontWeight: FontWeight.w600)),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
),
|
||||
title: Text(title, style: GoogleFonts.inter(fontWeight: FontWeight.w600, color: const Color(0xFF0F172A))),
|
||||
subtitle: Text(subtitle, style: GoogleFonts.inter(fontSize: 13, color: const Color(0xFF64748B))),
|
||||
trailing: const Icon(Icons.arrow_forward_ios, size: 16, color: Color(0xFFCBD5E1)),
|
||||
onTap: () {},
|
||||
ClipRRect(
|
||||
borderRadius: const BorderRadius.only(
|
||||
bottomLeft: Radius.circular(12),
|
||||
bottomRight: Radius.circular(12),
|
||||
),
|
||||
child: Container(
|
||||
height: 180,
|
||||
decoration: const BoxDecoration(color: Color(0xFFF1F5F9)),
|
||||
child: Stack(children: [
|
||||
Center(
|
||||
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: const BoxDecoration(color: Color(0xFF1A56DB), shape: BoxShape.circle),
|
||||
child: const Icon(Icons.location_on, color: Colors.white, size: 20),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text('Map placeholder',
|
||||
style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF94A3B8))),
|
||||
]),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: const Color(0xFFE2E8F0), width: 0.5),
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text('Jl. Kenangan No. 14',
|
||||
style: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w600)),
|
||||
Text('Surabaya, East Java',
|
||||
style: GoogleFonts.inter(fontSize: 11, color: const Color(0xFF64748B))),
|
||||
]),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildActivityCard() {
|
||||
final items = [
|
||||
{'icon': Icons.play_circle_outline, 'title': 'Navigation started', 'time': '08:32 — User began walking route', 'color': const Color(0xFF16A34A)},
|
||||
{'icon': Icons.warning_amber_outlined, 'title': 'Obstacle detected', 'time': '08:41 — AI alert at 1.8m distance', 'color': const Color(0xFFD97706)},
|
||||
{'icon': Icons.location_on_outlined, 'title': 'Location checkpoint', 'time': '09:05 — Arrived at Jl. Kenangan', 'color': const Color(0xFF1A56DB)},
|
||||
];
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: const Color(0xFFE2E8F0), width: 0.5),
|
||||
),
|
||||
child: Column(children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 12),
|
||||
child: Row(children: [
|
||||
Text('Recent activity', style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
const Spacer(),
|
||||
Text('Today', style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF94A3B8))),
|
||||
]),
|
||||
),
|
||||
...items.map((item) => Column(children: [
|
||||
const Divider(height: 0.5, thickness: 0.5, color: Color(0xFFE2E8F0)),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 30,
|
||||
height: 30,
|
||||
decoration: BoxDecoration(
|
||||
color: (item['color'] as Color).withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(item['icon'] as IconData, size: 16, color: item['color'] as Color),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(item['title'] as String,
|
||||
style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
Text(item['time'] as String,
|
||||
style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF64748B))),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
])),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildUserCard() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: const Color(0xFFE2E8F0), width: 0.5),
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Row(children: [
|
||||
Container(
|
||||
width: 36, height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF1A56DB).withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
child: const Icon(Icons.person, color: Color(0xFF1A56DB), size: 20),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text('User (Tunanetra)', style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w600)),
|
||||
Text('● Online now', style: GoogleFonts.inter(fontSize: 11, color: const Color(0xFF16A34A))),
|
||||
]),
|
||||
]),
|
||||
const SizedBox(height: 14),
|
||||
// Ganti GridView → Row+Column biasa, lebih predictable
|
||||
Row(children: [
|
||||
Expanded(child: _statCell('Battery', '85%')),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(child: _statCell('Speed', '3.2 km/h')),
|
||||
]),
|
||||
const SizedBox(height: 8),
|
||||
Row(children: [
|
||||
Expanded(child: _statCell('Distance', '1.4 km')),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(child: _statCell('Alerts', '12')),
|
||||
]),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _statCell(String label, String val) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFF8FAFC),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(label, style: GoogleFonts.inter(fontSize: 10, color: const Color(0xFF94A3B8))),
|
||||
const SizedBox(height: 2),
|
||||
Text(val, style: GoogleFonts.outfit(fontSize: 14, fontWeight: FontWeight.w600)),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildActionsCard() {
|
||||
final actions = [
|
||||
{'icon': Icons.videocam_outlined, 'label': 'Live view', 'sub': 'Camera feed', 'color': const Color(0xFF1A56DB)},
|
||||
{'icon': Icons.phone_outlined, 'label': 'Call user', 'sub': 'Voice call', 'color': const Color(0xFF16A34A)},
|
||||
{'icon': Icons.tune, 'label': 'AI sensitivity', 'sub': 'Obstacle distance', 'color': const Color(0xFF7C3AED)},
|
||||
{'icon': Icons.warning_rounded, 'label': 'Emergency ping', 'sub': 'Alert user now', 'color': const Color(0xFFDC2626)},
|
||||
];
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: const Color(0xFFE2E8F0), width: 0.5),
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text('QUICK ACTIONS',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 11, fontWeight: FontWeight.w600, color: const Color(0xFF94A3B8), letterSpacing: 0.06)),
|
||||
const SizedBox(height: 8),
|
||||
...actions.map((a) => InkWell(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
onTap: () {},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 6),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 28,
|
||||
height: 28,
|
||||
decoration: BoxDecoration(
|
||||
color: (a['color'] as Color).withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
child: Icon(a['icon'] as IconData, size: 15, color: a['color'] as Color),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(a['label'] as String,
|
||||
style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
Text(a['sub'] as String,
|
||||
style: GoogleFonts.inter(fontSize: 11, color: const Color(0xFF94A3B8))),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
)),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
+242
-109
@@ -1,10 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:camera/camera.dart';
|
||||
import 'package:animate_do/animate_do.dart';
|
||||
import '../../../core/secure_storage.dart';
|
||||
import '../../auth/presentation/login_screen.dart';
|
||||
import '../../../../main.dart'; // import global cameras
|
||||
import '../../../../main.dart';
|
||||
|
||||
class UserDashboardScreen extends StatefulWidget {
|
||||
const UserDashboardScreen({super.key});
|
||||
@@ -13,159 +12,293 @@ class UserDashboardScreen extends StatefulWidget {
|
||||
State<UserDashboardScreen> createState() => _UserDashboardScreenState();
|
||||
}
|
||||
|
||||
class _UserDashboardScreenState extends State<UserDashboardScreen> with SingleTickerProviderStateMixin {
|
||||
CameraController? _cameraController;
|
||||
late AnimationController _pulseController;
|
||||
class _UserDashboardScreenState extends State<UserDashboardScreen> with TickerProviderStateMixin {
|
||||
CameraController? _camCtrl;
|
||||
late AnimationController _radarCtrl;
|
||||
late Animation<double> _radarAnim;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_initCamera();
|
||||
|
||||
// Setup animasi radar berdenyut
|
||||
_pulseController = AnimationController(
|
||||
_radarCtrl = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(seconds: 2),
|
||||
)..repeat(reverse: true);
|
||||
_radarAnim = Tween<double>(begin: 0.9, end: 1.08).animate(
|
||||
CurvedAnimation(parent: _radarCtrl, curve: Curves.easeInOut),
|
||||
);
|
||||
_initCamera();
|
||||
}
|
||||
|
||||
Future<void> _initCamera() async {
|
||||
if (cameras.isEmpty) return;
|
||||
// Pakai kamera belakang (index 0)
|
||||
_cameraController = CameraController(cameras[0], ResolutionPreset.high, enableAudio: false);
|
||||
await _cameraController!.initialize();
|
||||
_camCtrl = CameraController(cameras[0], ResolutionPreset.high, enableAudio: false);
|
||||
await _camCtrl!.initialize();
|
||||
if (mounted) setState(() {});
|
||||
}
|
||||
|
||||
Future<void> _handleLogout() async {
|
||||
Future<void> _logout() async {
|
||||
await SecureStorage().deleteToken();
|
||||
if (mounted) {
|
||||
Navigator.pushAndRemoveUntil(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => const LoginScreen()),
|
||||
(route) => false, // Hapus history back
|
||||
(_) => false,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_cameraController?.dispose();
|
||||
_pulseController.dispose();
|
||||
_camCtrl?.dispose();
|
||||
_radarCtrl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
final topPad = MediaQuery.of(context).padding.top;
|
||||
final botPad = MediaQuery.of(context).padding.bottom;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.black,
|
||||
body: Stack(
|
||||
children: [
|
||||
// 1. LIVE CAMERA FEED
|
||||
SizedBox.expand(
|
||||
child: _cameraController != null && _cameraController!.value.isInitialized
|
||||
? CameraPreview(_cameraController!)
|
||||
: const Center(child: CircularProgressIndicator(color: Colors.white)),
|
||||
),
|
||||
body: Stack(children: [
|
||||
// 1. Camera feed
|
||||
SizedBox.expand(
|
||||
child: (_camCtrl != null && _camCtrl!.value.isInitialized)
|
||||
? CameraPreview(_camCtrl!)
|
||||
: Container(
|
||||
decoration: const BoxDecoration(color: Color(0xFF0A1520)),
|
||||
),
|
||||
),
|
||||
|
||||
// 2. EFEK RADAR SCANNING (Animasi Pulse)
|
||||
Positioned.fill(
|
||||
child: AnimatedBuilder(
|
||||
animation: _pulseController,
|
||||
builder: (context, child) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
const Color(0xFF10B981).withValues(alpha: 0.1 + (_pulseController.value * 0.15)),
|
||||
],
|
||||
stops: const [0.5, 1.0],
|
||||
radius: 1.5,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
// 2. Grid overlay
|
||||
SizedBox.expand(child: CustomPaint(painter: _GridPainter())),
|
||||
|
||||
// 3. Green scan gradient
|
||||
AnimatedBuilder(
|
||||
animation: _radarCtrl,
|
||||
builder: (_, __) => SizedBox.expand(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
const Color(0xFF10B981).withValues(alpha: 0.05 + _radarCtrl.value * 0.08),
|
||||
],
|
||||
stops: const [0.5, 1.0],
|
||||
radius: 1.4,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 3. OVERLAY STATUS & LOGOUT (Atas)
|
||||
Positioned(
|
||||
top: 60,
|
||||
left: 20,
|
||||
right: 20,
|
||||
child: FadeInDown(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// 4. Scan line
|
||||
AnimatedBuilder(
|
||||
animation: _radarCtrl,
|
||||
builder: (_, __) => Positioned(
|
||||
top: size.height * (0.3 + _radarCtrl.value * 0.35),
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
height: 1.5,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF60EFAB).withValues(alpha: 0.25),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 5. Top status bar
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: EdgeInsets.fromLTRB(16, topPad + 8, 16, 12),
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Colors.black87, Colors.transparent],
|
||||
),
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withValues(alpha: 0.54),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: const Color(0xFF60EFAB).withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withValues(alpha: 0.6),
|
||||
borderRadius: BorderRadius.circular(30),
|
||||
border: Border.all(color: const Color(0xFF10B981).withValues(alpha: 0.3)),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.spatial_audio_off, color: Color(0xFF10B981), size: 20),
|
||||
const SizedBox(width: 8),
|
||||
Text('Memindai Area...', style: GoogleFonts.inter(color: Colors.white, fontWeight: FontWeight.bold)),
|
||||
],
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF60EFAB),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
|
||||
// Tombol Logout
|
||||
IconButton(
|
||||
onPressed: _handleLogout,
|
||||
icon: const Icon(Icons.power_settings_new, color: Colors.white, size: 28),
|
||||
tooltip: 'Keluar',
|
||||
style: IconButton.styleFrom(backgroundColor: Colors.redAccent.withValues(alpha: 0.8)),
|
||||
const SizedBox(width: 7),
|
||||
Text(
|
||||
'Memindai area...',
|
||||
style: GoogleFonts.inter(
|
||||
color: Colors.white,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
]),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
IconButton(
|
||||
onPressed: _logout,
|
||||
icon: const Icon(Icons.power_settings_new, color: Colors.white, size: 26),
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: Colors.redAccent.withValues(alpha: 0.8),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
|
||||
// 4. OVERLAY TOMBOL BESAR (Bawah)
|
||||
Positioned(
|
||||
bottom: 40,
|
||||
left: 20,
|
||||
right: 20,
|
||||
child: FadeInUp(
|
||||
delay: const Duration(milliseconds: 300),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () {},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF2563EB).withValues(alpha: 0.9),
|
||||
padding: const EdgeInsets.symmetric(vertical: 24),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
|
||||
elevation: 10,
|
||||
),
|
||||
child: const Icon(Icons.mic, size: 48, color: Colors.white),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () {},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFDC2626).withValues(alpha: 0.9),
|
||||
padding: const EdgeInsets.symmetric(vertical: 24),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
|
||||
elevation: 10,
|
||||
),
|
||||
child: const Icon(Icons.phone_in_talk, size: 48, color: Colors.white),
|
||||
),
|
||||
),
|
||||
],
|
||||
// 6. Center radar
|
||||
Center(
|
||||
child: AnimatedBuilder(
|
||||
animation: _radarAnim,
|
||||
builder: (_, __) => Transform.scale(
|
||||
scale: _radarAnim.value,
|
||||
child: SizedBox(
|
||||
width: 100,
|
||||
height: 100,
|
||||
child: CustomPaint(painter: _RadarPainter()),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// 7. Obstacle alert card
|
||||
Positioned(
|
||||
bottom: 160,
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withValues(alpha: 0.6),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: const Color(0xFFF59E0B).withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 28,
|
||||
height: 28,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0x33F59E0B),
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
child: const Icon(Icons.warning_amber_rounded, color: Color(0xFFF59E0B), size: 16),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text('Obstacle ahead',
|
||||
style: GoogleFonts.inter(
|
||||
color: Colors.white, fontSize: 13, fontWeight: FontWeight.w500)),
|
||||
Text('2.1m — Haptic alert sent',
|
||||
style: GoogleFonts.inter(color: Colors.white60, fontSize: 11)),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
),
|
||||
|
||||
// 8. Bottom action buttons
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: EdgeInsets.fromLTRB(16, 16, 16, botPad + 20),
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.bottomCenter,
|
||||
end: Alignment.topCenter,
|
||||
colors: [Colors.black87, Colors.transparent],
|
||||
),
|
||||
),
|
||||
child: Column(children: [
|
||||
Row(children: [
|
||||
Expanded(child: _bigBtn(const Color(0xCC1A56DB), Icons.mic, () {})),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: _bigBtn(const Color(0xCCDC2626), Icons.phone_in_talk, () {})),
|
||||
]),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Vol+ terima panggilan • Vol- ping darurat',
|
||||
style: GoogleFonts.inter(fontSize: 10, color: Colors.white30),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _bigBtn(Color color, IconData icon, VoidCallback onTap) {
|
||||
return ElevatedButton(
|
||||
onPressed: onTap,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: color,
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(vertical: 22),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
||||
),
|
||||
child: Icon(icon, size: 40, color: Colors.white),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GridPainter extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final paint = Paint()
|
||||
..color = Colors.white.withValues(alpha: 0.04)
|
||||
..strokeWidth = 0.5;
|
||||
for (double x = 0; x < size.width; x += 25) {
|
||||
canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
|
||||
}
|
||||
for (double y = 0; y < size.height; y += 25) {
|
||||
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
|
||||
}
|
||||
|
||||
class _RadarPainter extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final center = Offset(size.width / 2, size.height / 2);
|
||||
final paint = Paint()
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 1.2;
|
||||
for (final r in [48.0, 34.0, 20.0]) {
|
||||
paint.color = const Color(0xFF60EFAB).withValues(alpha: 0.15 + (50 - r) / 100);
|
||||
canvas.drawCircle(center, r, paint);
|
||||
}
|
||||
paint
|
||||
..style = PaintingStyle.fill
|
||||
..color = const Color(0xFF60EFAB);
|
||||
canvas.drawCircle(center, 5, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
|
||||
}
|
||||
Reference in New Issue
Block a user