Files
tatlock-ui/lib/shared/widgets/sun_position_widget.dart
T
Jeroen SchweitzerandClaude Opus 4.5 d200cad8be
Build and Push / release (push) Successful in 3s
Build and Push / build (push) Successful in 3m11s
feat: environment widgets layout redesign with always-visible widgets
- Desktop: 4-in-a-row layout (30/20/20/30 distribution)
- Tablet: 2x2 grid layout
- Mobile: Stacked vertically
- All widgets show "No data available" state instead of being hidden
- Sun position calculates from clock, defaults to 6am/6pm
- Environment refresh changed from 5min to 1 hour

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 11:21:48 +01:00

446 lines
13 KiB
Dart

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:tatlock_ui/features/front_hall/data/models/environment_model.dart';
/// Sun position widget displaying sunrise/sunset with animated arc.
///
/// Shows a semicircle arc representing the day, with sun/moon icon
/// moving along based on current time. Uses color gradients:
/// - Blue tones for night
/// - Orange tones for sunrise/sunset
/// - Yellow tones for daytime
class SunPositionWidget extends StatelessWidget {
const SunPositionWidget({
super.key,
this.sunTimes,
this.compact = false,
});
/// Sun times data to display.
final SunTimesData? sunTimes;
/// Whether to use compact layout.
final bool compact;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
if (compact) {
return _buildCompact(context, colorScheme);
}
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Header
Row(
children: [
Icon(
_isDaytime ? Icons.wb_sunny : Icons.nightlight_round,
size: 20,
color: colorScheme.onSurfaceVariant,
),
const SizedBox(width: 8),
Text(
'Sun Position',
style: Theme.of(context).textTheme.titleSmall?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
],
),
const SizedBox(height: 16),
// Arc visualization
SizedBox(
height: 120,
child: CustomPaint(
size: const Size(double.infinity, 120),
painter: _SunArcPainter(
sunTimes: sunTimes,
isDark: colorScheme.brightness == Brightness.dark,
),
),
),
const SizedBox(height: 12),
// Sunrise/Sunset times
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_TimeDisplay(
icon: Icons.wb_twilight,
label: 'Sunrise',
time: sunTimes?.sunrise,
iconColor: Colors.orange,
),
if (sunTimes?.daylightMinutes != null)
_DaylightDisplay(minutes: sunTimes!.daylightMinutes!),
_TimeDisplay(
icon: Icons.nights_stay,
label: 'Sunset',
time: sunTimes?.sunset,
iconColor: Colors.deepOrange,
),
],
),
],
),
),
);
}
Widget _buildCompact(BuildContext context, ColorScheme colorScheme) {
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_isDaytime ? Icons.wb_sunny : Icons.nightlight_round,
size: 24,
color: _isDaytime ? Colors.amber : Colors.indigo,
),
const SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
_formatTime(sunTimes?.sunrise),
style: Theme.of(context).textTheme.labelSmall,
),
Text(
_formatTime(sunTimes?.sunset),
style: Theme.of(context).textTheme.labelSmall,
),
],
),
],
),
),
);
}
bool get _isDaytime {
final now = DateTime.now();
// Use actual sun times if available, otherwise default to 6am/6pm
final sunrise = sunTimes?.sunrise ??
DateTime(now.year, now.month, now.day, 6, 0);
final sunset = sunTimes?.sunset ??
DateTime(now.year, now.month, now.day, 18, 0);
return now.isAfter(sunrise) && now.isBefore(sunset);
}
String _formatTime(DateTime? time) {
if (time == null) return '--:--';
return '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}';
}
}
class _TimeDisplay extends StatelessWidget {
const _TimeDisplay({
required this.icon,
required this.label,
required this.time,
this.iconColor,
});
final IconData icon;
final String label;
final DateTime? time;
final Color? iconColor;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return Column(
children: [
Icon(
icon,
size: 20,
color: iconColor ?? colorScheme.primary,
),
const SizedBox(height: 4),
Text(
_formatTime(time),
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w600,
),
),
Text(
label,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
],
);
}
String _formatTime(DateTime? time) {
if (time == null) return '--:--';
return '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}';
}
}
class _DaylightDisplay extends StatelessWidget {
const _DaylightDisplay({required this.minutes});
final int minutes;
@override
Widget build(BuildContext context) {
final hours = minutes ~/ 60;
final mins = minutes % 60;
return Column(
children: [
Icon(
Icons.access_time,
size: 16,
color: Theme.of(context).colorScheme.outline,
),
const SizedBox(height: 4),
Text(
'${hours}h ${mins}m',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
fontWeight: FontWeight.w500,
),
),
Text(
'Daylight',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
);
}
}
/// Custom painter for the sun arc visualization.
class _SunArcPainter extends CustomPainter {
_SunArcPainter({
this.sunTimes,
this.isDark = false,
});
final SunTimesData? sunTimes;
final bool isDark;
// Color palette
static const _nightBlue = Color(0xFF1a237e);
static const _dawnOrange = Color(0xFFff6f00);
static const _sunriseOrange = Color(0xFFffa000);
static const _dayYellow = Color(0xFFffc107);
static const _dayGold = Color(0xFFffb300);
static const _duskOrange = Color(0xFFef6c00);
static const _nightIndigo = Color(0xFF283593);
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height - 10);
final radius = math.min(size.width / 2 - 20, size.height - 30);
// Draw horizon line
final horizonPaint = Paint()
..color = isDark ? Colors.white24 : Colors.black12
..strokeWidth = 1;
canvas.drawLine(
Offset(center.dx - radius - 10, center.dy),
Offset(center.dx + radius + 10, center.dy),
horizonPaint,
);
// Create gradient for arc background
final arcRect = Rect.fromCenter(
center: center,
width: radius * 2,
height: radius * 2,
);
// Draw arc background (night portion below horizon implied)
final arcBgPaint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 8
..strokeCap = StrokeCap.round;
// Create gradient that transitions through time of day colors
arcBgPaint.shader = SweepGradient(
center: Alignment.bottomCenter,
startAngle: math.pi,
endAngle: 2 * math.pi,
colors: [
_nightBlue.withValues(alpha: 0.3),
_dawnOrange.withValues(alpha: 0.5),
_sunriseOrange.withValues(alpha: 0.6),
_dayYellow.withValues(alpha: 0.7),
_dayGold.withValues(alpha: 0.7),
_dayYellow.withValues(alpha: 0.6),
_duskOrange.withValues(alpha: 0.5),
_nightIndigo.withValues(alpha: 0.3),
],
stops: const [0.0, 0.1, 0.2, 0.4, 0.5, 0.6, 0.8, 1.0],
transform: const GradientRotation(-math.pi / 2),
).createShader(arcRect);
// Draw the arc (semicircle from left to right)
canvas.drawArc(
arcRect,
math.pi, // Start at left (180 degrees)
math.pi, // Sweep 180 degrees (semicircle)
false,
arcBgPaint,
);
// Calculate sun position
final sunPosition = _calculateSunPosition();
// Draw sun/moon indicator
final angle = math.pi + (sunPosition * math.pi); // Map 0-1 to pi-2pi
final sunX = center.dx + radius * math.cos(angle);
final sunY = center.dy + radius * math.sin(angle);
// Determine if day or night for icon/color
final isDaytime = sunPosition > 0 && sunPosition < 1;
final isNearHorizon = sunPosition < 0.15 || sunPosition > 0.85;
// Sun/moon glow
if (isDaytime) {
final glowColor = isNearHorizon ? _dawnOrange : _dayYellow;
final glowPaint = Paint()
..shader = RadialGradient(
colors: [
glowColor.withValues(alpha: 0.6),
glowColor.withValues(alpha: 0.0),
],
).createShader(
Rect.fromCircle(center: Offset(sunX, sunY), radius: 24),
);
canvas.drawCircle(Offset(sunX, sunY), 24, glowPaint);
}
// Sun/moon circle
final sunPaint = Paint()
..style = PaintingStyle.fill
..color = isDaytime
? (isNearHorizon ? _sunriseOrange : _dayYellow)
: _nightIndigo;
canvas.drawCircle(Offset(sunX, sunY), 12, sunPaint);
// Sun rays or moon craters
if (isDaytime) {
final rayPaint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = (isNearHorizon ? _dawnOrange : _dayGold).withValues(alpha: 0.8);
for (var i = 0; i < 8; i++) {
final rayAngle = (i * math.pi / 4);
final innerRadius = 14.0;
final outerRadius = 18.0;
canvas.drawLine(
Offset(
sunX + innerRadius * math.cos(rayAngle),
sunY + innerRadius * math.sin(rayAngle),
),
Offset(
sunX + outerRadius * math.cos(rayAngle),
sunY + outerRadius * math.sin(rayAngle),
),
rayPaint,
);
}
} else {
// Moon highlight
final moonHighlight = Paint()
..style = PaintingStyle.fill
..color = Colors.white24;
canvas.drawCircle(Offset(sunX - 3, sunY - 3), 4, moonHighlight);
}
// Draw time markers on arc
_drawTimeMarkers(canvas, center, radius);
}
double _calculateSunPosition() {
final now = DateTime.now();
// Use actual sun times if available, otherwise default to 6am/6pm (12-hour cycles)
final sunrise = sunTimes?.sunrise ??
DateTime(now.year, now.month, now.day, 6, 0);
final sunset = sunTimes?.sunset ??
DateTime(now.year, now.month, now.day, 18, 0);
// Before sunrise
if (now.isBefore(sunrise)) {
// Calculate position in pre-dawn (negative values = below horizon)
final midnight = DateTime(now.year, now.month, now.day);
final minutesSinceMidnight = now.difference(midnight).inMinutes;
final minutesToSunrise = sunrise.difference(midnight).inMinutes;
// Map to 0 at sunrise, negative before
return (minutesSinceMidnight / minutesToSunrise) * 0.15 - 0.1;
}
// After sunset
if (now.isAfter(sunset)) {
// Calculate position in post-dusk
final minutesSinceSunset = now.difference(sunset).inMinutes;
final nextMidnight = DateTime(now.year, now.month, now.day + 1);
final minutesToMidnight = nextMidnight.difference(sunset).inMinutes;
// Map to 1 at sunset, going towards negative
return 1.0 + (minutesSinceSunset / minutesToMidnight) * 0.1;
}
// During daylight hours
final totalDaylight = sunset.difference(sunrise).inMinutes;
final minutesSinceSunrise = now.difference(sunrise).inMinutes;
return minutesSinceSunrise / totalDaylight;
}
void _drawTimeMarkers(Canvas canvas, Offset center, double radius) {
final textPainter = TextPainter(
textDirection: TextDirection.ltr,
textAlign: TextAlign.center,
);
final markerStyle = TextStyle(
fontSize: 10,
color: isDark ? Colors.white38 : Colors.black38,
);
// Draw quarter markers (6am, 12pm, 6pm positions conceptually)
final markers = ['6:00', '12:00', '18:00'];
final positions = [0.25, 0.5, 0.75];
for (var i = 0; i < markers.length; i++) {
final angle = math.pi + (positions[i] * math.pi);
final markerRadius = radius + 15;
final x = center.dx + markerRadius * math.cos(angle);
final y = center.dy + markerRadius * math.sin(angle);
textPainter.text = TextSpan(text: markers[i], style: markerStyle);
textPainter.layout();
textPainter.paint(
canvas,
Offset(x - textPainter.width / 2, y - textPainter.height / 2),
);
}
}
@override
bool shouldRepaint(covariant _SunArcPainter oldDelegate) {
return oldDelegate.sunTimes != sunTimes || oldDelegate.isDark != isDark;
}
}