Refactor SSE display widget styling and layout

Updated the SSE display widget to use ListView with improved padding and card styling. Switched to consistent use of kCodeStyle and theme-based colors, and simplified font size and color handling for better dark/light mode support.
This commit is contained in:
Ankit Mahato
2025-08-05 22:47:53 +05:30
parent af87942bdd
commit 3d8cf8ea2b

View File

@@ -14,74 +14,74 @@ class _SSEDisplayState extends State<SSEDisplay> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final fontSizeMedium = theme.textTheme.bodyMedium?.fontSize;
final isDark = theme.brightness == Brightness.dark;
List<dynamic> sse;
try {
sse = jsonDecode(widget.sseOutput);
} catch (e) {
return Text(
'Invalid SSE output',
style: theme.textTheme.bodyMedium?.copyWith(color: Colors.red),
style: kCodeStyle.copyWith(
fontSize: fontSizeMedium,
color: isDark ? kColorDarkDanger : kColorLightDanger,
),
);
}
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: sse.reversed.where((e) => e != '').map<Widget>((chunk) {
Map<String, dynamic>? parsedJson;
try {
parsedJson = jsonDecode(chunk);
} catch (_) {}
return ListView(
padding: kP1,
children: sse.reversed.where((e) => e != '').map<Widget>((chunk) {
Map<String, dynamic>? parsedJson;
try {
parsedJson = jsonDecode(chunk);
} catch (_) {}
return Card(
color: Theme.of(context).brightness == Brightness.light
? Colors.white
: const Color.fromARGB(255, 14, 20, 27),
margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: parsedJson != null
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: parsedJson.entries.map((entry) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${entry.key}: ',
style: theme.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.bold,
color: kColorGQL,
),
return Card(
color: theme.colorScheme.surfaceContainerLowest,
shape: RoundedRectangleBorder(
borderRadius: kBorderRadius6,
),
child: Padding(
padding: kP8,
child: parsedJson != null
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: parsedJson.entries.map((entry) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${entry.key}: ',
style: kCodeStyle.copyWith(
fontSize: fontSizeMedium,
color: isDark ? kColorGQL.toDark : kColorGQL,
fontWeight: FontWeight.bold,
),
const SizedBox(width: 4),
Expanded(
child: Text(
entry.value.toString(),
style: kCodeStyle,
),
),
const SizedBox(width: 4),
Expanded(
child: Text(
entry.value.toString(),
style: kCodeStyle,
),
],
),
);
}).toList(),
)
: Text(
chunk.toString().trim(),
style: theme.textTheme.bodyMedium?.copyWith(
fontFamily: 'monospace',
),
),
],
),
);
}).toList(),
)
: Text(
chunk.toString().trim(),
style: kCodeStyle.copyWith(
fontSize: fontSizeMedium,
),
),
);
}).toList(),
),
),
),
);
}).toList(),
);
}
}