JSON Viewer Guide
English| 简体中文 | Deutsch | Português | 日本語 | 한국어
Introduction
JSON Viewer is a Flutter widget for formatting and displaying JSON data, with support for expanding and collapsing JSON nodes. It is primarily used for viewing API response data in applications.
Installation
Add the dependency in pubspec.yaml:
dependencies:
json_shrink_widget: ^1.2.0
Basic Usage
Simplest way to use:
JsonShrinkWidget(
json: jsonString // Supports String, Map, and List types
)
Advanced Configuration
JsonShrinkWidget supports the following configuration options:
shrink
: bool - Whether to collapse by default, defaults to falsedeep
: int - JSON traversal depth levelindentation
: String - Indentation characterstyle
: JsonShrinkStyle - Style configurationdeepShrink
: int - Default collapse levelshowNumber
: bool - Whether to show the number of elements in arrays/objectsurlSpanBuilder
: Function - Custom URL link display style
Style configuration example:
JsonShrinkWidget(
json: jsonString,
shrink: true, // Collapsed by default
deep: 3, // Traverse 3 levels
indentation: " ", // Use 2 spaces for indentation
style: JsonShrinkStyle(
// Custom styles
keyStyle: TextStyle(color: Colors.blue),
valueStyle: TextStyle(color: Colors.black),
symbolStyle: TextStyle(color: Colors.grey)
),
showNumber: true // Show element count
)
Features
- Support for Multiple Data Types
- JSON String
- Map
- List
- Flexible Display Control
- Click to collapse/expand JSON nodes
- Set default collapse level
- Custom indentation style
- User-Friendly Visual Effects
- Syntax highlighting
- Formatted alignment
- Optional element count display
- Custom Configuration
- Style customization
- URL link handling
- Indentation control
Examples
- Basic JSON Display:
String jsonStr = '''
{
"name": "JSON Viewer",
"version": "1.2.0",
"author": "infinity"
}
''';
JsonShrinkWidget(
json: jsonStr
)
- Styled Configuration:
JsonShrinkWidget(
json: jsonData,
style: JsonShrinkStyle(
keyStyle: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold
),
valueStyle: TextStyle(
color: Colors.black87
)
)
)
- Show Array Element Count:
JsonShrinkWidget(
json: listData,
showNumber: true, // Show array length
shrink: true // Collapsed by default
)
Important Notes
- Input JSON string must be valid JSON format
- Recommended to set appropriate traversal depth (deep parameter) based on data size
- For large JSON data, recommended to use collapse mode by default
- Style configuration fully supports customization according to application theme
Common Issues
- JSON Parsing Failure
- Check if JSON string format is correct
- Verify string encoding is UTF-8
- Performance Issues
- Properly control deep parameter
- Use collapse mode for large data sets
- Style Issues
- Verify style configuration is correct
- Confirm TextStyle parameters