feat: Refactor theme management and enhance UI with AppTheme integration

This commit is contained in:
Janez T
2025-10-14 10:16:53 +02:00
parent 4fae6e4c55
commit 2eb2ee4433
9 changed files with 483 additions and 290 deletions

View File

@@ -140,7 +140,7 @@ class _ContactTile extends StatelessWidget {
margin: const EdgeInsets.only(bottom: 8),
child: ListTile(
leading: CircleAvatar(
backgroundColor: _getTypeColor(contact.type),
backgroundColor: _getTypeColor(contact.type, context),
child: contact.roleEmoji != null
? Text(
contact.roleEmoji!,
@@ -187,7 +187,7 @@ class _ContactTile extends StatelessWidget {
vertical: 2,
),
decoration: BoxDecoration(
color: _getTypeColor(contact.type).withOpacity(0.2),
color: _getTypeColor(contact.type, context).withOpacity(0.2),
borderRadius: BorderRadius.circular(4),
),
child: Text(
@@ -283,7 +283,7 @@ class _ContactTile extends StatelessWidget {
child: Row(
children: [
CircleAvatar(
backgroundColor: _getTypeColor(contact.type),
backgroundColor: _getTypeColor(contact.type, context),
child: contact.roleEmoji != null
? Text(
contact.roleEmoji!,
@@ -393,10 +393,10 @@ class _ContactTile extends StatelessWidget {
}
}
Color _getTypeColor(ContactType type) {
Color _getTypeColor(ContactType type, BuildContext context) {
switch (type) {
case ContactType.chat:
return Colors.blue;
return Theme.of(context).colorScheme.primary;
case ContactType.repeater:
return Colors.green;
case ContactType.room:

View File

@@ -4,6 +4,7 @@ import '../providers/connection_provider.dart';
import '../providers/app_provider.dart';
import '../models/device_info.dart' as models;
import '../services/tile_cache_service.dart';
import '../theme/app_theme.dart';
import 'messages_tab.dart';
import 'contacts_tab.dart';
import 'map_tab.dart';
@@ -11,8 +12,8 @@ import 'map_management_screen.dart';
import 'settings_screen.dart';
class HomeScreen extends StatefulWidget {
final Function(ThemeMode) onThemeChanged;
final ThemeMode currentTheme;
final Function(AppThemeMode) onThemeChanged;
final AppThemeMode currentTheme;
const HomeScreen({
super.key,
@@ -109,17 +110,17 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
margin: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.blue,
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(8),
),
child: const Row(
child: Row(
children: [
Icon(Icons.info_outline, color: Colors.white),
SizedBox(width: 12),
Icon(Icons.info_outline, color: Theme.of(context).colorScheme.onPrimaryContainer),
const SizedBox(width: 12),
Expanded(
child: Text(
'The default pin for devices without a screen is 123456. Trouble pairing? Forget the bluetooth device in system settings.',
style: TextStyle(color: Colors.white, fontSize: 13),
style: TextStyle(color: Theme.of(context).colorScheme.onPrimaryContainer, fontSize: 13),
),
),
],

View File

@@ -760,13 +760,13 @@ class _MapTabState extends State<MapTab> with AutomaticKeepAliveClientMixin {
rotate: false, // Don't rotate with map
child: Container(
decoration: BoxDecoration(
color: Colors.blue.withValues(alpha: 0.3),
color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.3),
shape: BoxShape.circle,
),
child: Container(
margin: const EdgeInsets.all(8),
decoration: const BoxDecoration(
color: Colors.blue,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
@@ -935,7 +935,7 @@ class _MapLegend extends StatelessWidget {
const SizedBox(height: 8),
_LegendItem(
icon: Icons.person,
color: Colors.blue,
color: Theme.of(context).colorScheme.primary,
label: 'Team',
count: teamMemberCount,
),
@@ -1252,7 +1252,7 @@ class _DetailedCompassDialogState extends State<_DetailedCompassDialog> {
// Contacts filter
_CompactFilterItem(
icon: Icons.person,
color: Colors.blue,
color: Theme.of(context).colorScheme.primary,
label: 'Contacts',
value: _showContacts,
onChanged: (value) {
@@ -1526,7 +1526,7 @@ class _DetailedCompassDialogState extends State<_DetailedCompassDialog> {
if (_selectedContact != null) {
title = _selectedContact!.displayName;
icon = Icons.person;
color = Colors.blue;
color = Theme.of(context).colorScheme.primary;
targetLocation = _selectedContact!.displayLocation;
if (targetLocation != null) {
@@ -1821,9 +1821,9 @@ class _DetailedCompassDialogState extends State<_DetailedCompassDialog> {
contact.roleEmoji!,
style: const TextStyle(fontSize: 24),
)
: const Icon(
: Icon(
Icons.person,
color: Colors.blue,
color: Theme.of(context).colorScheme.primary,
size: 24,
),
title: Text(contact.displayName),
@@ -2195,7 +2195,7 @@ class _LargeCompassPainter extends CustomPainter {
// Draw line from center to contact
final linePaint = Paint()
..color = Colors.blue.withValues(alpha: 0.3)
..color = Colors.lightBlue.withValues(alpha: 0.3)
..style = PaintingStyle.stroke
..strokeWidth = 1.5;
canvas.drawLine(
@@ -2207,7 +2207,7 @@ class _LargeCompassPainter extends CustomPainter {
// Draw contact dot (size varies with zoom)
final dotSize = (6.0 * (1.0 + zoomLevel * 0.3)).clamp(4.0, 12.0);
final dotPaint = Paint()
..color = Colors.blue
..color = Colors.lightBlue
..style = PaintingStyle.fill;
canvas.drawCircle(Offset(dotX, dotY), dotSize, dotPaint);
@@ -2228,7 +2228,7 @@ class _LargeCompassPainter extends CustomPainter {
textPainter.text = TextSpan(
text: distanceText,
style: const TextStyle(
color: Colors.blue,
color: Colors.lightBlue,
fontSize: 9,
fontWeight: FontWeight.bold,
),

View File

@@ -568,71 +568,65 @@ class _SarUpdateSheetState extends State<_SarUpdateSheet> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
),
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
height: MediaQuery.of(context).size.height * 0.9,
decoration: const BoxDecoration(
color: Color(0xFF1E1E1E),
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Header with drag handle
// Header
Container(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
child: Column(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Drag handle
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
borderRadius: BorderRadius.circular(2),
IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.pop(context),
),
const Expanded(
child: Column(
children: [
Text(
'Send SAR Marker',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Text(
'Quick location marker',
style: TextStyle(
color: Colors.grey,
fontSize: 14,
),
),
],
),
),
const SizedBox(height: 16),
// Title
Row(
children: [
Icon(
Icons.add_location_alt,
size: 24,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(width: 12),
Expanded(
child: Text(
'Send SAR Marker',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
IconButton(
icon: const Icon(Icons.close),
onPressed: () => Navigator.pop(context),
),
],
IconButton(
icon: const Icon(Icons.more_vert, color: Colors.white),
onPressed: () {},
),
],
),
),
const Divider(height: 1),
// Content
Flexible(
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Marker type selection
Text(
const Text(
'Marker Type',
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
_MarkerTypeChip(
@@ -661,29 +655,37 @@ class _SarUpdateSheetState extends State<_SarUpdateSheet> {
const SizedBox(height: 24),
// Location display
Text(
const Text(
'Current Location',
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
if (_loadingLocation)
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
color: const Color(0xFF2D2D2D),
borderRadius: BorderRadius.circular(8),
),
child: const Row(
children: [
SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
),
SizedBox(width: 16),
Text('Getting location...'),
Text(
'Getting location...',
style: TextStyle(color: Colors.white),
),
],
),
)
@@ -737,22 +739,18 @@ class _SarUpdateSheetState extends State<_SarUpdateSheet> {
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.3),
width: 1,
),
color: const Color(0xFF2D2D2D),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
const Icon(
Icons.location_on,
size: 20,
color: Theme.of(context).colorScheme.primary,
color: Colors.green,
),
const SizedBox(width: 8),
Expanded(
@@ -762,11 +760,12 @@ class _SarUpdateSheetState extends State<_SarUpdateSheet> {
fontFamily: 'monospace',
fontSize: 13,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
),
IconButton(
icon: const Icon(Icons.refresh, size: 20),
icon: const Icon(Icons.refresh, size: 20, color: Colors.white),
onPressed: _getCurrentLocation,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
@@ -778,15 +777,18 @@ class _SarUpdateSheetState extends State<_SarUpdateSheet> {
const SizedBox(height: 8),
Row(
children: [
Icon(
const Icon(
Icons.my_location,
size: 14,
color: Theme.of(context).colorScheme.onSurfaceVariant,
color: Colors.grey,
),
const SizedBox(width: 6),
Text(
'Accuracy: ±${_currentPosition!.accuracy!.round()}m',
style: Theme.of(context).textTheme.bodySmall,
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
],
),
@@ -797,89 +799,73 @@ class _SarUpdateSheetState extends State<_SarUpdateSheet> {
const SizedBox(height: 24),
// Optional notes
Text(
const Text(
'Notes (optional)',
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
TextField(
controller: _notesController,
maxLines: 3,
maxLength: 100,
style: const TextStyle(fontSize: 14, color: Colors.white),
decoration: InputDecoration(
hintText: 'Add additional information...',
hintStyle: const TextStyle(fontSize: 14),
hintStyle: const TextStyle(fontSize: 14, color: Colors.grey),
filled: true,
fillColor: const Color(0xFF2D2D2D),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.all(16),
),
style: const TextStyle(fontSize: 14),
),
const SizedBox(height: 8),
],
),
),
),
// Bottom action buttons
// Bottom action button
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
border: Border(
top: BorderSide(
color: Theme.of(context).dividerColor,
width: 1,
),
),
),
padding: const EdgeInsets.all(16),
child: SafeArea(
top: false,
child: Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () => Navigator.pop(context),
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: const Text('Cancel'),
child: SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: _currentPosition == null
? null
: () async {
await widget.onSend(
_selectedType,
_currentPosition!,
_notesController.text.trim().isEmpty
? null
: _notesController.text.trim(),
);
if (context.mounted) {
Navigator.pop(context);
}
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
disabledBackgroundColor: Colors.grey,
disabledForegroundColor: Colors.white70,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
const SizedBox(width: 12),
Expanded(
flex: 2,
child: FilledButton.icon(
onPressed: _currentPosition == null
? null
: () async {
await widget.onSend(
_selectedType,
_currentPosition!,
_notesController.text.trim().isEmpty
? null
: _notesController.text.trim(),
);
if (context.mounted) {
Navigator.pop(context);
}
},
style: FilledButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
icon: const Icon(Icons.send, size: 20),
label: const Text('Send SAR Marker'),
),
icon: const Icon(Icons.send, size: 20),
label: const Text(
'Send SAR Marker',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
),
],
),
),
),
),
@@ -922,36 +908,22 @@ class _MarkerTypeChip extends StatelessWidget {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(8),
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isSelected
? color.withValues(alpha: 0.15)
: Colors.transparent,
border: Border.all(
color: isSelected ? color : Colors.grey.withValues(alpha: 0.3),
width: isSelected ? 2 : 1,
),
borderRadius: BorderRadius.circular(12),
color: const Color(0xFF2D2D2D),
border: isSelected
? Border.all(color: color, width: 2)
: null,
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: isSelected
? color.withValues(alpha: 0.2)
: Colors.grey.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
alignment: Alignment.center,
child: Text(
type.emoji,
style: const TextStyle(fontSize: 28),
),
Text(
type.emoji,
style: const TextStyle(fontSize: 32),
),
const SizedBox(width: 16),
Expanded(
@@ -959,8 +931,8 @@ class _MarkerTypeChip extends StatelessWidget {
type.displayName,
style: TextStyle(
fontSize: 16,
fontWeight: isSelected ? FontWeight.bold : FontWeight.w500,
color: isSelected ? color : null,
fontWeight: FontWeight.w500,
color: isSelected ? color : Colors.white,
),
),
),
@@ -969,12 +941,6 @@ class _MarkerTypeChip extends StatelessWidget {
Icons.check_circle,
color: color,
size: 24,
)
else
Icon(
Icons.radio_button_unchecked,
color: Colors.grey.withValues(alpha: 0.4),
size: 24,
),
],
),

View File

@@ -9,10 +9,11 @@ import '../providers/messages_provider.dart';
import '../providers/app_provider.dart';
import '../services/background_location_service.dart';
import '../utils/sample_data_generator.dart';
import '../theme/app_theme.dart';
class SettingsScreen extends StatefulWidget {
final Function(ThemeMode) onThemeChanged;
final ThemeMode currentTheme;
final Function(AppThemeMode) onThemeChanged;
final AppThemeMode currentTheme;
const SettingsScreen({
super.key,
@@ -25,7 +26,7 @@ class SettingsScreen extends StatefulWidget {
}
class _SettingsScreenState extends State<SettingsScreen> {
late ThemeMode _selectedTheme;
late AppThemeMode _selectedTheme;
PackageInfo? _packageInfo;
bool _isLoadingSampleData = false;
double _gpsUpdateDistance = 10.0;
@@ -78,12 +79,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
await prefs.setBool('background_tracking_enabled', _backgroundTrackingEnabled);
}
Future<void> _saveThemePreference(ThemeMode theme) async {
Future<void> _saveThemePreference(AppThemeMode theme) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setString('theme_mode', theme.name);
}
void _handleThemeChange(ThemeMode? theme) {
void _handleThemeChange(AppThemeMode? theme) {
if (theme != null) {
setState(() {
_selectedTheme = theme;
@@ -250,7 +251,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
ListTile(
leading: const Icon(Icons.palette),
title: const Text('Theme'),
subtitle: Text(_getThemeLabel(_selectedTheme)),
subtitle: Text(AppTheme.getThemeDisplayName(_selectedTheme)),
trailing: const Icon(Icons.chevron_right),
onTap: () => _showThemeDialog(),
),
@@ -383,17 +384,6 @@ class _SettingsScreenState extends State<SettingsScreen> {
);
}
String _getThemeLabel(ThemeMode mode) {
switch (mode) {
case ThemeMode.light:
return 'Light';
case ThemeMode.dark:
return 'Dark';
case ThemeMode.system:
return 'Auto (System)';
}
}
void _showGpsDistanceDialog() {
double tempDistance = _gpsUpdateDistance;
showDialog(
@@ -471,40 +461,92 @@ class _SettingsScreenState extends State<SettingsScreen> {
context: context,
builder: (context) => AlertDialog(
title: const Text('Choose Theme'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
RadioListTile<ThemeMode>(
title: const Text('Light'),
subtitle: const Text('Always use light theme'),
value: ThemeMode.light,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
RadioListTile<ThemeMode>(
title: const Text('Dark'),
subtitle: const Text('Always use dark theme'),
value: ThemeMode.dark,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
RadioListTile<ThemeMode>(
title: const Text('Auto (System)'),
subtitle: const Text('Follow system theme'),
value: ThemeMode.system,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
],
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
RadioListTile<AppThemeMode>(
title: const Text('Light'),
subtitle: const Text('Orange light theme'),
value: AppThemeMode.light,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
RadioListTile<AppThemeMode>(
title: const Text('Dark'),
subtitle: const Text('Orange dark theme'),
value: AppThemeMode.dark,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
const Divider(),
RadioListTile<AppThemeMode>(
title: Row(
children: [
const Text('SAR Red'),
const SizedBox(width: 8),
Container(
width: 16,
height: 16,
decoration: BoxDecoration(
color: const Color(0xFFFF5252),
shape: BoxShape.circle,
border: Border.all(color: Colors.black26),
),
),
],
),
subtitle: const Text('Alert/Emergency mode'),
value: AppThemeMode.sarRed,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
RadioListTile<AppThemeMode>(
title: Row(
children: [
const Text('SAR Green'),
const SizedBox(width: 8),
Container(
width: 16,
height: 16,
decoration: BoxDecoration(
color: const Color(0xFF69F0AE),
shape: BoxShape.circle,
border: Border.all(color: Colors.black26),
),
),
],
),
subtitle: const Text('Safe/All Clear mode'),
value: AppThemeMode.sarGreen,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
const Divider(),
RadioListTile<AppThemeMode>(
title: const Text('Auto (System)'),
subtitle: const Text('Follow system theme'),
value: AppThemeMode.system,
groupValue: _selectedTheme,
onChanged: (value) {
_handleThemeChange(value);
Navigator.pop(context);
},
),
],
),
),
actions: [
TextButton(