mirror of
https://github.com/foss42/apidash.git
synced 2025-12-02 10:49:49 +08:00
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:
@@ -14,19 +14,23 @@ class _SSEDisplayState extends State<SSEDisplay> {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final theme = Theme.of(context);
|
final theme = Theme.of(context);
|
||||||
|
final fontSizeMedium = theme.textTheme.bodyMedium?.fontSize;
|
||||||
|
final isDark = theme.brightness == Brightness.dark;
|
||||||
List<dynamic> sse;
|
List<dynamic> sse;
|
||||||
try {
|
try {
|
||||||
sse = jsonDecode(widget.sseOutput);
|
sse = jsonDecode(widget.sseOutput);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return Text(
|
return Text(
|
||||||
'Invalid SSE output',
|
'Invalid SSE output',
|
||||||
style: theme.textTheme.bodyMedium?.copyWith(color: Colors.red),
|
style: kCodeStyle.copyWith(
|
||||||
|
fontSize: fontSizeMedium,
|
||||||
|
color: isDark ? kColorDarkDanger : kColorLightDanger,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return SingleChildScrollView(
|
return ListView(
|
||||||
child: Column(
|
padding: kP1,
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
||||||
children: sse.reversed.where((e) => e != '').map<Widget>((chunk) {
|
children: sse.reversed.where((e) => e != '').map<Widget>((chunk) {
|
||||||
Map<String, dynamic>? parsedJson;
|
Map<String, dynamic>? parsedJson;
|
||||||
try {
|
try {
|
||||||
@@ -34,16 +38,12 @@ class _SSEDisplayState extends State<SSEDisplay> {
|
|||||||
} catch (_) {}
|
} catch (_) {}
|
||||||
|
|
||||||
return Card(
|
return Card(
|
||||||
color: Theme.of(context).brightness == Brightness.light
|
color: theme.colorScheme.surfaceContainerLowest,
|
||||||
? Colors.white
|
|
||||||
: const Color.fromARGB(255, 14, 20, 27),
|
|
||||||
margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
|
|
||||||
elevation: 2,
|
|
||||||
shape: RoundedRectangleBorder(
|
shape: RoundedRectangleBorder(
|
||||||
borderRadius: BorderRadius.circular(12),
|
borderRadius: kBorderRadius6,
|
||||||
),
|
),
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.all(12.0),
|
padding: kP8,
|
||||||
child: parsedJson != null
|
child: parsedJson != null
|
||||||
? Column(
|
? Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
@@ -55,9 +55,10 @@ class _SSEDisplayState extends State<SSEDisplay> {
|
|||||||
children: [
|
children: [
|
||||||
Text(
|
Text(
|
||||||
'${entry.key}: ',
|
'${entry.key}: ',
|
||||||
style: theme.textTheme.bodyMedium?.copyWith(
|
style: kCodeStyle.copyWith(
|
||||||
|
fontSize: fontSizeMedium,
|
||||||
|
color: isDark ? kColorGQL.toDark : kColorGQL,
|
||||||
fontWeight: FontWeight.bold,
|
fontWeight: FontWeight.bold,
|
||||||
color: kColorGQL,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(width: 4),
|
const SizedBox(width: 4),
|
||||||
@@ -74,14 +75,13 @@ class _SSEDisplayState extends State<SSEDisplay> {
|
|||||||
)
|
)
|
||||||
: Text(
|
: Text(
|
||||||
chunk.toString().trim(),
|
chunk.toString().trim(),
|
||||||
style: theme.textTheme.bodyMedium?.copyWith(
|
style: kCodeStyle.copyWith(
|
||||||
fontFamily: 'monospace',
|
fontSize: fontSizeMedium,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}).toList(),
|
}).toList(),
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user