Flutter JSON数据输入插件json_text_field的使用

Flutter JSON数据输入插件json_text_field的使用

插件介绍

json_text_field 是一个用于在 TextField 中直接编辑 JSON 文件的综合包。它与 Flutter 完美集成，提供丰富的自定义 JSON 操作体验。

主要功能

• 动态 JSON 值高亮：通过可定制的文本样式轻松区分 JSON 元素，如键、字符串、数字、布尔值、null 值和特殊字符。
• 验证和错误显示：实时验证 JSON 字符串，快速修复错误。
• 直观的 JSON 格式化：自动格式化 JSON 字符串以提高可读性，支持排序和自定义控制器。
• 无缝集成：易于集成到现有 Flutter 项目中，无需额外的平台特定配置。

开始使用

添加插件

将 json_text_field 添加为依赖项，添加到 pubspec.yaml 文件中。详情请参阅 Flutter 的插件指南。

dependencies:
  json_text_field: ^1.0.0

导入插件

import 'package:json_text_field/json_text_field.dart';

基本用法

替换标准的 TextField 为 JsonTextField 以启用 JSON 编辑能力。

const JsonTextField(),

可定制特性

JsonTextField 延续了熟悉的 TextField 界面，增加了独特的属性以实现个性化的 JSON 编辑体验：

• 自定义高亮样式：

  • keyHighlightStyle: 键的样式。
  • stringHighlightStyle: 字符串值的样式。
  • numberHighlightStyle: 数字值的样式。
  • booleanHighlightStyle: 布尔值的样式。
  • nullHighlightStyle: null 值的样式。
  • specialCharacterHighlightStyle: 特殊字符的样式。

• 自定义错误样式：

  • errorTextStyle: 错误文本的样式。
  • errorContainerDecoration: 错误容器的装饰。

• 格式化和排序：

  • isFormatting: 启用或禁用 JSON 字符串格式化。
  • showErrorMessage: 显示或隐藏错误消息。

控制器使用

JsonTextField 使用 JsonTextFieldController，这是一个增强版的 TextEditingController，带有额外的 JSON 格式化方法。

final JsonTextFieldController controller = JsonTextFieldController();

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

示例代码

import 'package:flutter/material.dart';
import 'package:json_text_field/json_text_field.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = JsonTextFieldController();
  bool isFormating = true;

  // 这个 widget 是应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: Scaffold(
          appBar: AppBar(
              title: const Center(child: Text('JSON Text Field Example'))),
          body: Center(
            child: Column(
              children: [
                const SizedBox(height: 50),
                SizedBox(
                  width: 300,
                  height: 300,
                  child: JsonTextField(
                    onError: (error) => debugPrint(error),
                    showErrorMessage: true,
                    controller: controller,
                    isFormatting: isFormating,
                    keyboardType: TextInputType.multiline,
                    expands: true,
                    maxLines: null,
                    textAlignVertical: TextAlignVertical.top,
                    onChanged: (value) {},
                    decoration: InputDecoration(
                      hintText: "Enter JSON",
                      hintStyle: TextStyle(
                        color:
                            Theme.of(context).colorScheme.outline.withOpacity(
                                  0.6,
                                ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                        borderSide: BorderSide(
                          color:
                              Theme.of(context).colorScheme.primary.withOpacity(
                                    0.6,
                                  ),
                        ),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                        borderSide: BorderSide(
                          color: Theme.of(context).colorScheme.surfaceVariant,
                        ),
                      ),
                      filled: true,
                    ),
                  ),
                ),
                ElevatedButton(
                    onPressed: () => controller.formatJson(sortJson: false),
                    child: const Text('Format JSON')),
                ElevatedButton(
                    onPressed: () => controller.formatJson(sortJson: true),
                    child: const Text('Format JSON (sort)')),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Format as JSON'),
                    Switch(
                        value: isFormating,
                        onChanged: (value) =>
                            setState(() => isFormating = value)),
                  ],
                ),
              ],
            ),
          ),
        ));
  }
}

示例代码链接

完整的示例可以在 GitHub 上找到：

https://github.com/antonioCaballero17/json_text_field/blob/main/example/lib/main.dart