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,74 +14,74 @@ 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 {
|
parsedJson = jsonDecode(chunk);
|
||||||
parsedJson = jsonDecode(chunk);
|
} catch (_) {}
|
||||||
} catch (_) {}
|
|
||||||
|
|
||||||
return Card(
|
return Card(
|
||||||
color: Theme.of(context).brightness == Brightness.light
|
color: theme.colorScheme.surfaceContainerLowest,
|
||||||
? Colors.white
|
shape: RoundedRectangleBorder(
|
||||||
: const Color.fromARGB(255, 14, 20, 27),
|
borderRadius: kBorderRadius6,
|
||||||
margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
|
),
|
||||||
elevation: 2,
|
child: Padding(
|
||||||
shape: RoundedRectangleBorder(
|
padding: kP8,
|
||||||
borderRadius: BorderRadius.circular(12),
|
child: parsedJson != null
|
||||||
),
|
? Column(
|
||||||
child: Padding(
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
padding: const EdgeInsets.all(12.0),
|
children: parsedJson.entries.map((entry) {
|
||||||
child: parsedJson != null
|
return Padding(
|
||||||
? Column(
|
padding: const EdgeInsets.symmetric(vertical: 2.0),
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
child: Row(
|
||||||
children: parsedJson.entries.map((entry) {
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
return Padding(
|
children: [
|
||||||
padding: const EdgeInsets.symmetric(vertical: 2.0),
|
Text(
|
||||||
child: Row(
|
'${entry.key}: ',
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
style: kCodeStyle.copyWith(
|
||||||
children: [
|
fontSize: fontSizeMedium,
|
||||||
Text(
|
color: isDark ? kColorGQL.toDark : kColorGQL,
|
||||||
'${entry.key}: ',
|
fontWeight: FontWeight.bold,
|
||||||
style: theme.textTheme.bodyMedium?.copyWith(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: kColorGQL,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
const SizedBox(width: 4),
|
),
|
||||||
Expanded(
|
const SizedBox(width: 4),
|
||||||
child: Text(
|
Expanded(
|
||||||
entry.value.toString(),
|
child: Text(
|
||||||
style: kCodeStyle,
|
entry.value.toString(),
|
||||||
),
|
style: kCodeStyle,
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
],
|
||||||
);
|
),
|
||||||
}).toList(),
|
);
|
||||||
)
|
}).toList(),
|
||||||
: Text(
|
)
|
||||||
chunk.toString().trim(),
|
: Text(
|
||||||
style: theme.textTheme.bodyMedium?.copyWith(
|
chunk.toString().trim(),
|
||||||
fontFamily: 'monospace',
|
style: kCodeStyle.copyWith(
|
||||||
),
|
fontSize: fontSizeMedium,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
}).toList(),
|
);
|
||||||
),
|
}).toList(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user