jpmschweitzer/tatlock-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat(dashboard): add gauge, weather, and air quality widgets

Browse Source 
- Create shared GaugeWidget with circular progress and customizable colors
- Add GaugeRow for displaying multiple gauges in a responsive layout
- Create WeatherWidget with temperature, condition, and details
- Create AirQualityWidget with AQI levels and pollutant readings
- Update DashboardContent with System Stats gauges and Environment section
- Both widgets use mock data, ready for API integration

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
2026-01-02 23:09:15 +01:00
co-authored by Claude Opus 4.5
parent 40db92d9d5
commit 9c9ec472ef
5 changed files with 889 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/front_hall/presentation/widgets/dashboard_content.dart
+88 -65
View File
@@ -1,10 +1,10 @@
import 'package:flutter/material.dart';
import 'package:tatlock_ui/shared/widgets/widgets.dart';
import 'package:tatlock_ui/version.g.dart';
/// Dashboard content shown in Front Hall when mode is dashboard.
///
/// Displays system stats, welcome message, and version info.
/// Will be expanded with weather and air quality widgets in Phase 3.
/// Displays system stats with gauges, weather, air quality, and version info.
class DashboardContent extends StatelessWidget {
const DashboardContent({super.key});
@@ -40,7 +40,7 @@ class DashboardContent extends StatelessWidget {
),
const SizedBox(height: 12),
Text(
'Your homelab dashboard is ready. More features coming soon.',
'Your homelab dashboard is ready.',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: colorScheme.onSurfaceVariant,
),
@@ -51,39 +51,70 @@ class DashboardContent extends StatelessWidget {
),
const SizedBox(height: 16),
// Quick stats placeholder
Wrap(
spacing: 12,
runSpacing: 12,
children: [
SizedBox(
width: 160,
child: _StatCard(
icon: Icons.memory,
label: 'CPU',
value: '--',
color: colorScheme.primary,
),
// System Stats - Gauges
_SectionHeader(title: 'System Stats', icon: Icons.monitor_heart),
const SizedBox(height: 8),
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: GaugeRow(
gaugeSize: 90,
gauges: [
GaugeData(
value: 0.35,
label: 'CPU',
icon: Icons.memory,
color: colorScheme.primary,
),
GaugeData(
value: 0.62,
label: 'Memory',
icon: Icons.storage,
color: colorScheme.secondary,
),
GaugeData(
value: 0.78,
label: 'Disk',
icon: Icons.disc_full,
color: colorScheme.tertiary,
),
GaugeData(
value: 0.12,
label: 'Network',
icon: Icons.wifi,
color: Colors.teal,
),
],
),
SizedBox(
width: 160,
child: _StatCard(
icon: Icons.storage,
label: 'Memory',
value: '--',
color: colorScheme.secondary,
),
),
SizedBox(
width: 160,
child: _StatCard(
icon: Icons.dns,
label: 'Containers',
value: '--',
color: colorScheme.tertiary,
),
),
],
),
),
const SizedBox(height: 24),
// Environment - Weather & Air Quality
_SectionHeader(title: 'Environment', icon: Icons.eco),
const SizedBox(height: 8),
LayoutBuilder(
builder: (context, constraints) {
// Responsive layout: side-by-side on wider screens
if (constraints.maxWidth > 500) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: WeatherWidget()),
const SizedBox(width: 12),
Expanded(child: AirQualityWidget()),
],
);
}
// Stack on narrow screens
return Column(
children: [
WeatherWidget(),
const SizedBox(height: 12),
AirQualityWidget(),
],
);
},
),
const SizedBox(height: 24),
@@ -101,44 +132,36 @@ class DashboardContent extends StatelessWidget {
}
}
class _StatCard extends StatelessWidget {
const _StatCard({
/// Section header with icon and title.
class _SectionHeader extends StatelessWidget {
const _SectionHeader({
required this.title,
required this.icon,
required this.label,
required this.value,
required this.color,
});
final String title;
final IconData icon;
final String label;
final String value;
final Color color;
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Icon(icon, size: 32, color: color),
const SizedBox(height: 8),
Text(
value,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
label,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.outline,
),
),
],
final colorScheme = Theme.of(context).colorScheme;
return Row(
children: [
Icon(
icon,
size: 18,
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(width: 8),
Text(
title,
style: Theme.of(context).textTheme.titleSmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500,
),
),
],
);
}
}