A comprehensive package designed for editing JSON text directly within a TextField. This tool integrates seamlessly with Flutter, providing a rich and customizable experience for JSON manipulation.

It is a fork of json_text_field which includes various improvements.

Key Features

Dynamic JSON Value Highlighting: Effortlessly distinguish between different JSON elements like keys, strings, numbers, booleans, nulls, and special characters through customizable text styles.
Validation and Error Display: Instantly validates JSON strings, highlighting errors for quick fixes.
Intuitive JSON Formatting: Automatically formats JSON strings for better readability, with options for sorting and custom controllers.
Seamless Integration: Easy to incorporate into existing Flutter projects, requiring no additional platform-specific configurations.

Getting Started

Adding the Package

Include json_field_editor in your project by adding it as a dependency in your pubspec.yaml file. For detailed instructions, visit Flutter's plugin guide.

Importing the Package

import 'package:json_field_editor/json_field_editor.dart';

Basic Usage

Replace the standard TextField widget with JsonField to enable JSON editing capabilities.

const JsonField(),

Customizable Features

JsonField extends the familiar TextField widget, adding unique properties for a tailored JSON editing experience:

Custom Highlight Styles: Personalize the appearance for different JSON elements:
- keyHighlightStyle: Style for JSON keys.
- stringHighlightStyle: Style for string values.
- numberHighlightStyle: Style for number values.
- booleanHighlightStyle: Style for boolean values.
- nullHighlightStyle: Style for null values.
- specialCharacterHighlightStyle: Style for special characters.

Example Configuration

JsonField(
    keyHighlightStyle: TextStyle(color: Colors.red),
    stringHighlightStyle: TextStyle(color: Colors.green),
    numberHighlightStyle: TextStyle(color: Colors.blue),
    booleanHighlightStyle: TextStyle(color: Colors.yellow),
    nullHighlightStyle: TextStyle(color: Colors.purple),
    specialCharacterHighlightStyle: TextStyle(color: Colors.orange),
),

Custom Error Styles: Personalize the appearance for different JSON errors:
- errorTextStyle: Style for JSON errors text.
- errorContainerDecoration: Decoration for JSON errors container.
Formatting and Sorting: Enable or disable automatic formatting and sorting of the JSON string.
- isFormatting: Toggle JSON string formatting.
- showErrorMessage: Show or hide error messages.
Controller Usage

JsonField utilizes JsonTextFieldController, an enhanced version of TextEditingController, with an additional method for JSON formatting and sorting.

final JsonTextFieldController controller = JsonTextFieldController();

Column(
    children: [
        JsonField(
            controller: controller,
            isFormatting: true,
            showErrorMessage: false,
        ),
        ElevatedButton(
            onPressed: () => controller.formatJson(sortJson: true),
            child: const Text('Format Json (sort)'),
        ),
    ],
)

Explore the complete example in the example folder.

Maintainer

Ashita Prasad (GitHub, LinkedIn, X)

License

This project is licensed under the Apache 2.0 & MIT License.

README.md

json_field_editor