Skip to content

Commit d5ca409

Browse files
fullenifulleni
committed
refactor: The metadata display in all shared headline tile widgets has been updated as requested. Chips have been removed and replaced with plain text. The text color for metadata (date, category, source) is now a muted version of the user's preferred primary accent color (colorScheme.primary.withOpacity(0.7)). The font size for this metadata is based on textTheme.bodySmall, and spacing uses AppSpacing constants for consistency.
1 parent 265e462 commit d5ca409

File tree

3 files changed

+90
-127
lines changed

3 files changed

+90
-127
lines changed

‎lib/shared/widgets/headline_tile_image_start.dart

Lines changed: 30 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -159,45 +159,40 @@ class _HeadlineMetadataRow extends StatelessWidget {
159159
Widget build(BuildContext context) {
160160
final formattedDate = formatRelativeTime(context, headline.publishedAt);
161161

162-
// Use labelSmall as a base and make it smaller for metadata text
163-
final baseTextStyle = textTheme.labelSmall;
164-
final metadataStyle = baseTextStyle?.copyWith(
165-
color: colorScheme.onSurfaceVariant,
166-
fontSize: baseTextStyle.fontSize != null ? baseTextStyle.fontSize! * 0.85 : 10, // 15% smaller or fallback
162+
// Use bodySmall for a reasonable base size, with muted accent color
163+
final metadataTextStyle = textTheme.bodySmall?.copyWith(
164+
color: colorScheme.primary.withOpacity(0.7),
167165
);
168-
// Use the same derived style for chip labels for consistency
169-
final chipLabelStyle = metadataStyle;
170-
171-
// Use a muted version of the secondary container color for the chip background
172-
final chipBackgroundColor = colorScheme.secondaryContainer.withOpacity(0.4);
173-
const iconSize = AppSpacing.sm;
166+
// Icon color to match the subtle text
167+
final iconColor = colorScheme.primary.withOpacity(0.7);
168+
const iconSize = AppSpacing.sm; // Standard small icon size
174169

175170
return Wrap(
176-
spacing: AppSpacing.xs,
177-
runSpacing: AppSpacing.xs,
171+
spacing: AppSpacing.sm, // Increased spacing for readability
172+
runSpacing: AppSpacing.xs,
178173
crossAxisAlignment: WrapCrossAlignment.center,
179174
children: [
180175
if (formattedDate.isNotEmpty)
181-
Row(
176+
Row(
182177
mainAxisSize: MainAxisSize.min,
183178
children: [
184179
Icon(
185180
Icons.calendar_today_outlined,
186-
size: iconSize,
187-
color: colorScheme.onSurfaceVariant,
181+
size: iconSize,
182+
color: iconColor,
188183
),
189-
const SizedBox(width: AppSpacing.xs / 2), // Minimal space
190-
Text(formattedDate, style: metadataStyle),
184+
const SizedBox(width: AppSpacing.xs / 2),
185+
Text(formattedDate, style: metadataTextStyle),
191186
],
192187
),
193-
// Conditionally render Category Chip
188+
// Conditionally render Category as Text
194189
if (headline.category?.name != null &&
195190
!(currentContextEntityType == EntityType.category &&
196191
headline.category!.id == currentContextEntityId)) ...[
197-
if (formattedDate.isNotEmpty) // Add separator if date was present
192+
if (formattedDate.isNotEmpty)
198193
Padding(
199-
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
200-
child: Text('•', style: metadataStyle),
194+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
195+
child: Text('•', style: metadataTextStyle),
201196
),
202197
GestureDetector(
203198
onTap: () {
@@ -208,28 +203,23 @@ class _HeadlineMetadataRow extends StatelessWidget {
208203
);
209204
}
210205
},
211-
child: Chip(
212-
label: Text(headline.category!.name),
213-
labelStyle: chipLabelStyle,
214-
backgroundColor: chipBackgroundColor,
215-
padding: EdgeInsets.zero,
216-
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2, vertical: 0), // Minimal vertical padding
217-
visualDensity: VisualDensity.compact,
218-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
206+
child: Text(
207+
headline.category!.name,
208+
style: metadataTextStyle,
219209
),
220210
),
221211
],
222-
// Conditionally render Source Chip
212+
// Conditionally render Source as Text
223213
if (headline.source?.name != null &&
224214
!(currentContextEntityType == EntityType.source &&
225215
headline.source!.id == currentContextEntityId)) ...[
226-
// Add separator if date or category was present
227-
if (formattedDate.isNotEmpty || (headline.category?.name != null &&
228-
!(currentContextEntityType == EntityType.category &&
229-
headline.category!.id == currentContextEntityId)) )
216+
if (formattedDate.isNotEmpty ||
217+
(headline.category?.name != null &&
218+
!(currentContextEntityType == EntityType.category &&
219+
headline.category!.id == currentContextEntityId)))
230220
Padding(
231-
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
232-
child: Text('•', style: metadataStyle),
221+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
222+
child: Text('•', style: metadataTextStyle),
233223
),
234224
GestureDetector(
235225
onTap: () {
@@ -240,14 +230,9 @@ class _HeadlineMetadataRow extends StatelessWidget {
240230
);
241231
}
242232
},
243-
child: Chip(
244-
label: Text(headline.source!.name),
245-
labelStyle: chipLabelStyle,
246-
backgroundColor: chipBackgroundColor,
247-
padding: EdgeInsets.zero,
248-
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2, vertical: 0), // Minimal vertical padding
249-
visualDensity: VisualDensity.compact,
250-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
233+
child: Text(
234+
headline.source!.name,
235+
style: metadataTextStyle,
251236
),
252237
),
253238
],

‎lib/shared/widgets/headline_tile_image_top.dart

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -170,42 +170,40 @@ class _HeadlineMetadataRow extends StatelessWidget {
170170
Widget build(BuildContext context) {
171171
final formattedDate = formatRelativeTime(context, headline.publishedAt);
172172

173-
final baseTextStyle = textTheme.labelSmall;
174-
final metadataStyle = baseTextStyle?.copyWith(
175-
color: colorScheme.onSurfaceVariant,
176-
fontSize: baseTextStyle.fontSize != null ? baseTextStyle.fontSize! * 0.85 : 10,
173+
// Use bodySmall for a reasonable base size, with muted accent color
174+
final metadataTextStyle = textTheme.bodySmall?.copyWith(
175+
color: colorScheme.primary.withOpacity(0.7),
177176
);
178-
final chipLabelStyle = metadataStyle;
179-
180-
final chipBackgroundColor = colorScheme.secondaryContainer.withOpacity(0.4);
181-
const iconSize = AppSpacing.sm;
177+
// Icon color to match the subtle text
178+
final iconColor = colorScheme.primary.withOpacity(0.7);
179+
const iconSize = AppSpacing.sm; // Standard small icon size
182180

183181
return Wrap(
184-
spacing: AppSpacing.xs,
185-
runSpacing: AppSpacing.xs,
182+
spacing: AppSpacing.sm, // Increased spacing for readability
183+
runSpacing: AppSpacing.xs,
186184
crossAxisAlignment: WrapCrossAlignment.center,
187185
children: [
188186
if (formattedDate.isNotEmpty)
189-
Row(
187+
Row(
190188
mainAxisSize: MainAxisSize.min,
191189
children: [
192190
Icon(
193191
Icons.calendar_today_outlined,
194-
size: iconSize,
195-
color: colorScheme.onSurfaceVariant,
192+
size: iconSize,
193+
color: iconColor,
196194
),
197-
const SizedBox(width: AppSpacing.xs / 2),
198-
Text(formattedDate, style: metadataStyle),
195+
const SizedBox(width: AppSpacing.xs / 2),
196+
Text(formattedDate, style: metadataTextStyle),
199197
],
200198
),
201-
// Conditionally render Category Chip
199+
// Conditionally render Category as Text
202200
if (headline.category?.name != null &&
203201
!(currentContextEntityType == EntityType.category &&
204202
headline.category!.id == currentContextEntityId)) ...[
205-
if (formattedDate.isNotEmpty)
203+
if (formattedDate.isNotEmpty)
206204
Padding(
207-
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
208-
child: Text('•', style: metadataStyle),
205+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
206+
child: Text('•', style: metadataTextStyle),
209207
),
210208
GestureDetector(
211209
onTap: () {
@@ -216,27 +214,23 @@ class _HeadlineMetadataRow extends StatelessWidget {
216214
);
217215
}
218216
},
219-
child: Chip(
220-
label: Text(headline.category!.name),
221-
labelStyle: chipLabelStyle,
222-
backgroundColor: chipBackgroundColor,
223-
padding: EdgeInsets.zero,
224-
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2, vertical: 0),
225-
visualDensity: VisualDensity.compact,
226-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
217+
child: Text(
218+
headline.category!.name,
219+
style: metadataTextStyle,
227220
),
228221
),
229222
],
230-
// Conditionally render Source Chip
223+
// Conditionally render Source as Text
231224
if (headline.source?.name != null &&
232225
!(currentContextEntityType == EntityType.source &&
233226
headline.source!.id == currentContextEntityId)) ...[
234-
if (formattedDate.isNotEmpty || (headline.category?.name != null &&
235-
!(currentContextEntityType == EntityType.category &&
236-
headline.category!.id == currentContextEntityId)) )
227+
if (formattedDate.isNotEmpty ||
228+
(headline.category?.name != null &&
229+
!(currentContextEntityType == EntityType.category &&
230+
headline.category!.id == currentContextEntityId)))
237231
Padding(
238-
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
239-
child: Text('•', style: metadataStyle),
232+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
233+
child: Text('•', style: metadataTextStyle),
240234
),
241235
GestureDetector(
242236
onTap: () {
@@ -247,14 +241,9 @@ class _HeadlineMetadataRow extends StatelessWidget {
247241
);
248242
}
249243
},
250-
child: Chip(
251-
label: Text(headline.source!.name),
252-
labelStyle: chipLabelStyle,
253-
backgroundColor: chipBackgroundColor,
254-
padding: EdgeInsets.zero,
255-
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2, vertical: 0),
256-
visualDensity: VisualDensity.compact,
257-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
244+
child: Text(
245+
headline.source!.name,
246+
style: metadataTextStyle,
258247
),
259248
),
260249
],

‎lib/shared/widgets/headline_tile_text_only.dart

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -119,42 +119,40 @@ class _HeadlineMetadataRow extends StatelessWidget {
119119
Widget build(BuildContext context) {
120120
final formattedDate = formatRelativeTime(context, headline.publishedAt);
121121

122-
final baseTextStyle = textTheme.labelSmall;
123-
final metadataStyle = baseTextStyle?.copyWith(
124-
color: colorScheme.onSurfaceVariant,
125-
fontSize: baseTextStyle.fontSize != null ? baseTextStyle.fontSize! * 0.85 : 10,
122+
// Use bodySmall for a reasonable base size, with muted accent color
123+
final metadataTextStyle = textTheme.bodySmall?.copyWith(
124+
color: colorScheme.primary.withOpacity(0.7),
126125
);
127-
final chipLabelStyle = metadataStyle;
128-
129-
final chipBackgroundColor = colorScheme.secondaryContainer.withOpacity(0.4);
130-
const iconSize = AppSpacing.sm;
126+
// Icon color to match the subtle text
127+
final iconColor = colorScheme.primary.withOpacity(0.7);
128+
const iconSize = AppSpacing.sm; // Standard small icon size
131129

132130
return Wrap(
133-
spacing: AppSpacing.xs,
134-
runSpacing: AppSpacing.xs,
131+
spacing: AppSpacing.sm, // Increased spacing for readability
132+
runSpacing: AppSpacing.xs,
135133
crossAxisAlignment: WrapCrossAlignment.center,
136134
children: [
137135
if (formattedDate.isNotEmpty)
138-
Row(
136+
Row(
139137
mainAxisSize: MainAxisSize.min,
140138
children: [
141139
Icon(
142140
Icons.calendar_today_outlined,
143-
size: iconSize,
144-
color: colorScheme.onSurfaceVariant,
141+
size: iconSize,
142+
color: iconColor,
145143
),
146-
const SizedBox(width: AppSpacing.xs / 2),
147-
Text(formattedDate, style: metadataStyle),
144+
const SizedBox(width: AppSpacing.xs / 2),
145+
Text(formattedDate, style: metadataTextStyle),
148146
],
149147
),
150-
// Conditionally render Category Chip
148+
// Conditionally render Category as Text
151149
if (headline.category?.name != null &&
152150
!(currentContextEntityType == EntityType.category &&
153151
headline.category!.id == currentContextEntityId)) ...[
154-
if (formattedDate.isNotEmpty)
152+
if (formattedDate.isNotEmpty)
155153
Padding(
156-
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
157-
child: Text('•', style: metadataStyle),
154+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
155+
child: Text('•', style: metadataTextStyle),
158156
),
159157
GestureDetector(
160158
onTap: () {
@@ -165,27 +163,23 @@ class _HeadlineMetadataRow extends StatelessWidget {
165163
);
166164
}
167165
},
168-
child: Chip(
169-
label: Text(headline.category!.name),
170-
labelStyle: chipLabelStyle,
171-
backgroundColor: chipBackgroundColor,
172-
padding: EdgeInsets.zero,
173-
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2, vertical: 0),
174-
visualDensity: VisualDensity.compact,
175-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
166+
child: Text(
167+
headline.category!.name,
168+
style: metadataTextStyle,
176169
),
177170
),
178171
],
179-
// Conditionally render Source Chip
172+
// Conditionally render Source as Text
180173
if (headline.source?.name != null &&
181174
!(currentContextEntityType == EntityType.source &&
182175
headline.source!.id == currentContextEntityId)) ...[
183-
if (formattedDate.isNotEmpty || (headline.category?.name != null &&
184-
!(currentContextEntityType == EntityType.category &&
185-
headline.category!.id == currentContextEntityId)) )
176+
if (formattedDate.isNotEmpty ||
177+
(headline.category?.name != null &&
178+
!(currentContextEntityType == EntityType.category &&
179+
headline.category!.id == currentContextEntityId)))
186180
Padding(
187-
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2),
188-
child: Text('•', style: metadataStyle),
181+
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
182+
child: Text('•', style: metadataTextStyle),
189183
),
190184
GestureDetector(
191185
onTap: () {
@@ -196,14 +190,9 @@ class _HeadlineMetadataRow extends StatelessWidget {
196190
);
197191
}
198192
},
199-
child: Chip(
200-
label: Text(headline.source!.name),
201-
labelStyle: chipLabelStyle,
202-
backgroundColor: chipBackgroundColor,
203-
padding: EdgeInsets.zero,
204-
labelPadding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs / 2, vertical: 0),
205-
visualDensity: VisualDensity.compact,
206-
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
193+
child: Text(
194+
headline.source!.name,
195+
style: metadataTextStyle,
207196
),
208197
),
209198
],

0 commit comments

Comments
 (0)