bvandeusen/FabledApp
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

fix: weather card spacing and sizing consistency

Browse Source 
- Consistent 8px vertical rhythm (was 6/4/10 mix)
- Larger current temp (36px vs 32px) for better visual weight
- Fixed 64px forecast column width prevents uneven wrapping
- Forecast condition text clipped at 2 lines with ellipsis
- 12px spacing around forecast divider

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-03-26 17:36:53 -04:00
parent 46d0427901
commit 9f524e158d
1 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/weather_card.dart
+37 -31
View File
@@ -95,7 +95,7 @@ class WeatherCard extends StatelessWidget {
), ),
], ],
), ),
const SizedBox(height: 6), const SizedBox(height: 8),
// Current temp + condition // Current temp + condition
Row( Row(
crossAxisAlignment: CrossAxisAlignment.baseline, crossAxisAlignment: CrossAxisAlignment.baseline,
@@ -104,7 +104,7 @@ class WeatherCard extends StatelessWidget {
Text( Text(
'$currentTemp°', '$currentTemp°',
style: TextStyle( style: TextStyle(
fontSize: 32, fontSize: 36,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: scheme.onSurface, color: scheme.onSurface,
height: 1, height: 1,
@@ -122,7 +122,7 @@ class WeatherCard extends StatelessWidget {
), ),
// Today high/low + delta // Today high/low + delta
if (todayHigh != null) ...[ if (todayHigh != null) ...[
const SizedBox(height: 4), const SizedBox(height: 8),
Text( Text(
'Today: $todayHigh° / $todayLow°' 'Today: $todayHigh° / $todayLow°'
'${tempDelta != null ? ' · $tempDelta' : ''}', '${tempDelta != null ? ' · $tempDelta' : ''}',
@@ -131,42 +131,48 @@ class WeatherCard extends StatelessWidget {
], ],
// Forecast strip // Forecast strip
if (forecast.isNotEmpty) ...[ if (forecast.isNotEmpty) ...[
const SizedBox(height: 10), const SizedBox(height: 12),
const Divider(height: 1), const Divider(height: 1),
const SizedBox(height: 10), const SizedBox(height: 12),
SingleChildScrollView( SingleChildScrollView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
child: Row( child: Row(
spacing: 16, spacing: 8,
children: forecast.map((day) { children: forecast.map((day) {
return Column( return SizedBox(
children: [ width: 64,
Text( child: Column(
day['day'] as String? ?? '', crossAxisAlignment: CrossAxisAlignment.center,
style: TextStyle( children: [
fontSize: 12, Text(
fontWeight: FontWeight.w600, day['day'] as String? ?? '',
color: scheme.onSurface, style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: scheme.onSurface,
),
), ),
), const SizedBox(height: 3),
const SizedBox(height: 2), Text(
Text( day['condition'] as String? ?? '',
day['condition'] as String? ?? '', style: TextStyle(
style: TextStyle( fontSize: 11,
fontSize: 11, color: scheme.onSurfaceVariant,
color: scheme.onSurfaceVariant, ),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
textAlign: TextAlign.center, const SizedBox(height: 3),
), Text(
const SizedBox(height: 2), '${day['high']}° / ${day['low']}°',
Text( style: TextStyle(
'${day['high']}° / ${day['low']}°', fontSize: 12,
style: TextStyle( color: scheme.onSurface,
fontSize: 12, ),
color: scheme.onSurface,
), ),
), ],
], ),
); );
}).toList(), }).toList(),
), ),