mirror of
https://github.com/aljazceru/Auto-GPT.git
synced 2026-01-03 22:34:29 +01:00
05ce744f8c
This commit introduces the JsonCodeSnippetView, a widget designed to display JSON data in a pretty-printed format. Users can view the JSON content with proper indentation and formatting, enhancing readability. Features: - The JSON data is displayed using the HighlightView with GitHub-themed syntax highlighting. - A copy button (IconButton) is provided to allow users to easily copy the pretty-printed JSON to the clipboard. - Padding and layout adjustments ensure that the view fits seamlessly within the designated space, with scrollable content if the JSON exceeds the available space. This widget enhances the user experience when interacting with JSON data, providing a clean and efficient way to view and copy content.
65 lines
2.3 KiB
Dart
65 lines
2.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_highlight/flutter_highlight.dart';
|
|
import 'package:flutter_highlight/themes/github.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'dart:convert';
|
|
|
|
class JsonCodeSnippetView extends StatelessWidget {
|
|
final String jsonString;
|
|
|
|
// Constructor to initialize the jsonString that will be displayed
|
|
const JsonCodeSnippetView({
|
|
Key? key,
|
|
required this.jsonString,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// Pretty print the JSON using JsonEncoder to format with indentation
|
|
String prettyJson =
|
|
const JsonEncoder.withIndent(' ').convert(json.decode(jsonString));
|
|
|
|
return Padding(
|
|
// Padding applied to align the code snippet view within its container
|
|
padding: const EdgeInsets.fromLTRB(30, 30, 0, 30),
|
|
child: Row(
|
|
children: [
|
|
// Expanded widget to ensure the code snippet view takes the available space
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
// SingleChildScrollView to make the code snippet scrollable if it overflows
|
|
child: HighlightView(
|
|
// Display the pretty-printed JSON
|
|
prettyJson,
|
|
// Set the language to JSON for syntax highlighting
|
|
language: 'json',
|
|
// Apply a GitHub-like theme for the highlighting
|
|
theme: githubTheme,
|
|
// Padding applied to the code snippet inside the view
|
|
padding: const EdgeInsets.all(12),
|
|
// TextStyle applied to the code snippet (monospace font)
|
|
textStyle: const TextStyle(
|
|
fontFamily: 'monospace',
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// SizedBox to create a gap between the code snippet view and the copy button
|
|
const SizedBox(width: 20),
|
|
Material(
|
|
// IconButton to allow the user to copy the pretty-printed JSON to the clipboard
|
|
child: IconButton(
|
|
icon: const Icon(Icons.copy),
|
|
onPressed: () {
|
|
// Copy the pretty-printed JSON to the clipboard
|
|
Clipboard.setData(ClipboardData(text: prettyJson));
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|