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
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
@@ -104,7 +104,7 @@ class WeatherCard extends StatelessWidget {
Text(
'$currentTemp°',
style: TextStyle(
fontSize: 32,
fontSize: 36,
fontWeight: FontWeight.w700,
color: scheme.onSurface,
height: 1,
@@ -122,7 +122,7 @@ class WeatherCard extends StatelessWidget {
),
// Today high/low + delta
if (todayHigh != null) ...[
const SizedBox(height: 4),
const SizedBox(height: 8),
Text(
'Today: $todayHigh° / $todayLow°'
'${tempDelta != null ? ' · $tempDelta' : ''}',
@@ -131,42 +131,48 @@ class WeatherCard extends StatelessWidget {
],
// Forecast strip
if (forecast.isNotEmpty) ...[
const SizedBox(height: 10),
const SizedBox(height: 12),
const Divider(height: 1),
const SizedBox(height: 10),
const SizedBox(height: 12),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
spacing: 16,
spacing: 8,
children: forecast.map((day) {
return Column(
children: [
Text(
day['day'] as String? ?? '',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: scheme.onSurface,
return SizedBox(
width: 64,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
day['day'] as String? ?? '',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: scheme.onSurface,
),
),
),
const SizedBox(height: 2),
Text(
day['condition'] as String? ?? '',
style: TextStyle(
fontSize: 11,
color: scheme.onSurfaceVariant,
const SizedBox(height: 3),
Text(
day['condition'] as String? ?? '',
style: TextStyle(
fontSize: 11,
color: scheme.onSurfaceVariant,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 2),
Text(
'${day['high']}° / ${day['low']}°',
style: TextStyle(
fontSize: 12,
color: scheme.onSurface,
const SizedBox(height: 3),
Text(
'${day['high']}° / ${day['low']}°',
style: TextStyle(
fontSize: 12,
color: scheme.onSurface,
),
),
),
],
],
),
);
}).toList(),
),