first week update
This commit is contained in:
+99
-63
@@ -1,21 +1,40 @@
|
||||
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 {
|
||||
await SecureStorage().deleteToken();
|
||||
if (context.mounted) {
|
||||
Navigator.pushAndRemoveUntil(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => const LoginScreen()),
|
||||
(route) => false, // Bersihin tumpukan screen
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF8FAFC), // Warna background abu-abu sangat muda (modern)
|
||||
backgroundColor: const Color(0xFFF8FAFC),
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.white,
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
title: Text('Guardian Command', style: GoogleFonts.outfit(color: const Color(0xFF0F172A), fontWeight: FontWeight.bold)),
|
||||
title: FadeInDown(
|
||||
child: Text('Guardian Command', style: GoogleFonts.outfit(color: const Color(0xFF0F172A), fontWeight: FontWeight.bold, fontSize: 24)),
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.notifications_none_rounded, color: Color(0xFF0F172A)),
|
||||
onPressed: () {},
|
||||
FadeInDown(
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.logout_rounded, color: Color(0xFFDC2626)),
|
||||
tooltip: 'Logout',
|
||||
onPressed: () => _handleLogout(context),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -24,76 +43,93 @@ class GuardianDashboardScreen extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 1. KARTU STATUS USER (Hero Card)
|
||||
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).withOpacity(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)),
|
||||
// 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('Sedang Berjalan', 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('Jl. Kenangan, SBY', style: GoogleFonts.inter(color: Colors.white70, fontSize: 12)),
|
||||
],
|
||||
),
|
||||
],
|
||||
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
|
||||
Text('Aksi Cepat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
|
||||
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),
|
||||
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)),
|
||||
],
|
||||
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 (Persiapan buat fitur shortcut lu)
|
||||
Text('Konfigurasi Perangkat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
|
||||
// 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),
|
||||
_buildSettingTile(Icons.gamepad_outlined, 'Hardware Shortcuts', 'Atur fungsi tombol volume hp user'),
|
||||
_buildSettingTile(Icons.spatial_audio_outlined, 'Sensitivitas AI', 'Atur jarak deteksi rintangan'),
|
||||
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 bantuan buat Bikin Kotak Menu
|
||||
Widget _buildQuickAction(IconData icon, String label, Color color) {
|
||||
return Expanded(
|
||||
child: Container(
|
||||
@@ -101,8 +137,8 @@ class GuardianDashboardScreen extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: Colors.grey.withOpacity(0.1)),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.02), blurRadius: 10)],
|
||||
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: [
|
||||
@@ -115,14 +151,14 @@ class GuardianDashboardScreen extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
// Widget bantuan buat Bikin List Setting
|
||||
Widget _buildSettingTile(IconData icon, String title, String subtitle) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: Colors.grey.withOpacity(0.1)),
|
||||
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))],
|
||||
),
|
||||
child: ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
@@ -134,7 +170,7 @@ class GuardianDashboardScreen extends StatelessWidget {
|
||||
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: () {}, // Nanti kita arahin ke halaman setting
|
||||
onTap: () {},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
+116
-52
@@ -1,103 +1,167 @@
|
||||
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
|
||||
|
||||
class UserDashboardScreen extends StatelessWidget {
|
||||
class UserDashboardScreen extends StatefulWidget {
|
||||
const UserDashboardScreen({super.key});
|
||||
|
||||
@override
|
||||
State<UserDashboardScreen> createState() => _UserDashboardScreenState();
|
||||
}
|
||||
|
||||
class _UserDashboardScreenState extends State<UserDashboardScreen> with SingleTickerProviderStateMixin {
|
||||
CameraController? _cameraController;
|
||||
late AnimationController _pulseController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_initCamera();
|
||||
|
||||
// Setup animasi radar berdenyut
|
||||
_pulseController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(seconds: 2),
|
||||
)..repeat(reverse: true);
|
||||
}
|
||||
|
||||
Future<void> _initCamera() async {
|
||||
if (cameras.isEmpty) return;
|
||||
// Pakai kamera belakang (index 0)
|
||||
_cameraController = CameraController(cameras[0], ResolutionPreset.high, enableAudio: false);
|
||||
await _cameraController!.initialize();
|
||||
if (mounted) setState(() {});
|
||||
}
|
||||
|
||||
Future<void> _handleLogout() async {
|
||||
await SecureStorage().deleteToken();
|
||||
if (mounted) {
|
||||
Navigator.pushAndRemoveUntil(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => const LoginScreen()),
|
||||
(route) => false, // Hapus history back
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_cameraController?.dispose();
|
||||
_pulseController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.black, // Background hitam buat area kamera
|
||||
backgroundColor: Colors.black,
|
||||
body: Stack(
|
||||
children: [
|
||||
// 1. AREA KAMERA FULL SCREEN (Placeholder)
|
||||
// 1. LIVE CAMERA FEED
|
||||
SizedBox.expand(
|
||||
child: _cameraController != null && _cameraController!.value.isInitialized
|
||||
? CameraPreview(_cameraController!)
|
||||
: const Center(child: CircularProgressIndicator(color: Colors.white)),
|
||||
),
|
||||
|
||||
// 2. EFEK RADAR SCANNING (Animasi Pulse)
|
||||
Positioned.fill(
|
||||
child: Container(
|
||||
color: Colors.grey[900],
|
||||
child: const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.camera_alt_outlined, color: Colors.white54, size: 64),
|
||||
SizedBox(height: 16),
|
||||
Text('Kamera Aktif\nMemindai Rintangan...',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(color: Colors.white54, fontSize: 18),
|
||||
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. OVERLAY INFORMASI ATAS
|
||||
// 3. OVERLAY STATUS & LOGOUT (Atas)
|
||||
Positioned(
|
||||
top: 60,
|
||||
left: 20,
|
||||
right: 20,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.6),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: FadeInDown(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.spatial_audio_off, color: Colors.greenAccent, size: 24),
|
||||
const SizedBox(width: 8),
|
||||
Text('Sistem Siap', style: GoogleFonts.inter(color: Colors.white, fontWeight: FontWeight.bold)),
|
||||
],
|
||||
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)),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// 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 Icon(Icons.battery_4_bar, color: Colors.white),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 3. OVERLAY TOMBOL BAWAH (Gede & Kontras)
|
||||
// 4. OVERLAY TOMBOL BESAR (Bawah)
|
||||
Positioned(
|
||||
bottom: 40,
|
||||
left: 20,
|
||||
right: 20,
|
||||
child: Row(
|
||||
children: [
|
||||
// Tombol Voice Command
|
||||
Expanded(
|
||||
child: Semantics(
|
||||
label: 'Tombol Perintah Suara',
|
||||
hint: 'Tekan dua kali untuk memberikan perintah suara',
|
||||
child: FadeInUp(
|
||||
delay: const Duration(milliseconds: 300),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () {},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF2563EB), // Biru terang
|
||||
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: 40, color: Colors.white),
|
||||
child: const Icon(Icons.mic, size: 48, color: Colors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
// Tombol Call Guardian
|
||||
Expanded(
|
||||
child: Semantics(
|
||||
label: 'Panggil Pendamping',
|
||||
hint: 'Tekan dua kali untuk menelepon pendamping Anda',
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () {},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFDC2626), // Merah peringatan
|
||||
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: 40, color: Colors.white),
|
||||
child: const Icon(Icons.phone_in_talk, size: 48, color: Colors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user