sprint-4b: Flutter display theme system (AutopilotTheme + 4 palettes + tests)
Implements the visual theme system specified in mock up software.pdf.
Flutter project — display/:
- pubspec.yaml: ar_autopilot_display v0.4.0+4 (provider + shared_preferences)
- lib/theme/autopilot_theme.dart: AutopilotTheme class with 30+ design tokens
(backgrounds, panels, text, accent, set-point, semantic states, DISENGAGE,
action buttons, glow helpers, backgroundDecoration getter)
- lib/theme/theme_registry.dart: ThemeRegistry with 4 factory themes,
byId() fallback, architecture stub for Sprint 9 custom YAML themes
- lib/theme/theme_provider.dart: AutopilotThemeProvider (ChangeNotifier),
SharedPreferences persistence under 'autopilot.theme.id', NOT sent to ESP32
- lib/theme/themes/: 4 factory themes with exact hex values from spec:
light (cream/navy, accentGlowRadius=0 — daytime no-glow rule)
cyan (deep navy/neon-cyan, default, glowRadius=16)
wine (vinotinto, DISENGAGE=amber not red, glowRadius=18)
ochre (warm brown/gold, okColor=lime for contrast, glowRadius=18)
- lib/screens/settings/appearance_settings.dart: Appearance screen with
4-card theme previews (200x120px), 400ms AnimatedContainer transitions,
triple-tap shortcut note, Sprint-5 placeholders for auto day/night and
ambient light sensor toggles
- lib/widgets/themed/: 4 themed widgets consuming AutopilotThemeProvider:
compass_rose.dart (heading arc, N mark, set-point tick, glow ring)
disengage_button.dart (60x60 min touch target, gradient, glow)
mode_selector.dart (STANDBY/HDG HOLD/TRACK with accent highlight)
rudder_indicator.dart (horizontal bar -35° to +35°, accent knob)
- lib/main.dart: app entry point with ChangeNotifierProvider
Tests — display/test/theme/:
- theme_registry_test.dart: 4 themes load, correct IDs, display order,
no null tokens, glow rules, backgroundGradient rules
- theme_provider_test.dart: default load=cyan, persistence across restarts,
setTheme notifies listeners, unknown ID falls back to default
- theme_contrast_test.dart: WCAG checks — DISENGAGE ≥7:1 AAA,
action buttons ≥4.5:1 AA, textMain ≥4.5:1 AA, setLight/okColor ≥3:1
Also:
- .gitignore: added !display/lib/ exception (lib/ was excluded for Python venv)
Design rules enforced:
- No glow in light mode (accentGlowRadius=0)
- DISENGAGE = amber in wine theme (red would blend into palette)
- North mark = warm colour on all themes (nautical convention)
- Touch targets: 48px nominal, 60px critical
- Theme not sent to ESP32, not synced between displays
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../../theme/autopilot_theme.dart';
|
||||
import '../../theme/theme_provider.dart';
|
||||
|
||||
/// Autopilot mode selector — STANDBY / HEADING_HOLD / TRACK_KEEP.
|
||||
///
|
||||
/// The active mode is highlighted with [AutopilotTheme.accentMid].
|
||||
/// Inactive modes use muted text and panel border.
|
||||
/// Minimum touch target: 48×48 px per mode button.
|
||||
enum AutopilotMode { standby, headingHold, trackKeep }
|
||||
|
||||
extension AutopilotModeLabel on AutopilotMode {
|
||||
String get label => switch (this) {
|
||||
AutopilotMode.standby => 'STANDBY',
|
||||
AutopilotMode.headingHold => 'HDG HOLD',
|
||||
AutopilotMode.trackKeep => 'TRACK',
|
||||
};
|
||||
}
|
||||
|
||||
class ModeSelector extends StatelessWidget {
|
||||
const ModeSelector({
|
||||
super.key,
|
||||
required this.activeMode,
|
||||
required this.onModeSelected,
|
||||
});
|
||||
|
||||
final AutopilotMode activeMode;
|
||||
final ValueChanged<AutopilotMode> onModeSelected;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = context.watch<AutopilotThemeProvider>().current;
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: theme.panelBackground,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: theme.panelBorder),
|
||||
),
|
||||
child: Row(
|
||||
children: AutopilotMode.values.map((mode) {
|
||||
final isActive = mode == activeMode;
|
||||
return Expanded(
|
||||
child: _ModeButton(
|
||||
theme: theme,
|
||||
mode: mode,
|
||||
isActive: isActive,
|
||||
onTap: () => onModeSelected(mode),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ModeButton extends StatelessWidget {
|
||||
const _ModeButton({
|
||||
required this.theme,
|
||||
required this.mode,
|
||||
required this.isActive,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final AutopilotTheme theme;
|
||||
final AutopilotMode mode;
|
||||
final bool isActive;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
constraints: const BoxConstraints(minHeight: 48),
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: isActive ? theme.accentMid.withValues(alpha: 0.15) : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
mode.label,
|
||||
style: TextStyle(
|
||||
color: isActive ? theme.accentLight : theme.textMuted,
|
||||
fontSize: 12,
|
||||
fontWeight: isActive ? FontWeight.w700 : FontWeight.w400,
|
||||
letterSpacing: 0.8,
|
||||
shadows: isActive && theme.accentGlowRadius > 0
|
||||
? [Shadow(color: theme.accentGlowColor, blurRadius: 6)]
|
||||
: null,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user