Flutter JSON处理插件dartify_json的使用

本文将介绍如何使用 dartify_json 插件生成 Dart 类，并通过示例展示其在 Flutter 应用中的使用方法。

Dart Class Generator from JSON

该工具允许从 JSON 文件生成 Dart 类。它能够将给定的 JSON 结构转换为带有字段、构造函数以及 toJson 和 fromJson 方法的 Dart 类。生成的类会被保存到 lib/generated 目录下。

特性

• 自动从 JSON 文件生成 Dart 类。
• 支持嵌套 JSON 结构，会创建适当的导入和嵌套类。
• 生成 fromJson 和 toJson 方法，便于序列化和反序列化。

要求

• 已安装 Dart SDK。

使用方法

在项目中添加 dartify_json 作为依赖后，可以通过以下命令运行：

dart run dartify_json -i <路径到你的JSON文件> -c 类名

• -i 或 --input: 指向 JSON 文件的路径。
• -c 或 --className: 生成的 Dart 类的名称。

示例

假设你有以下 JSON 文件 address.json：

{
  "street": "123 Main St",
  "city": "Metropolis",
  "country": {
    "name": "Wonderland",
    "code": "WL"
  }
}

要从该 JSON 文件生成 Dart 类，运行以下命令：

dart run dartify_json -i address.json -c Address

生成的文件将保存在 lib/generated/address.dart，内容如下：

import 'country.dart';

class Address {
  final String street;
  final String city;
  final Country country;

  Address({
    required this.street,
    required this.city,
    required this.country,
  });

  factory Address.fromJson(Map<String, dynamic> json) {
    return Address(
      street: json['street'],
      city: json['city'],
      country: Country.fromJson(json['country']),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'street': street,
      'city': city,
      'country': country.toJson(),
    };
  }
}

如果 JSON 包含嵌套对象（如 country），脚本还会为这些嵌套对象生成相应的类。

目录结构

生成的文件会被放置在 lib/generated 目录中。如果目录不存在，它会自动创建。

示例目录结构

project_root/
  ├── lib/
  │   ├── generated/
  │   │   ├── address.dart
  │   │   └── country.dart
  └── main.dart

如何工作

1. 解析 JSON: 脚本通过 dart:convert 解析 JSON 文件。
2. 生成字段: JSON 对象中的键用于创建 Dart 类的字段，类型会自动推断。
3. 生成方法: 生成 fromJson 和 toJson 方法，便于序列化和反序列化。
4. 处理嵌套对象: 对于嵌套的 JSON 对象，生成额外的 Dart 类并添加适当的导入。

在 API 中使用生成的类

1. 导入生成的类

首先，在需要使用生成类的文件中导入生成的类。

例如，如果你生成了一个 User 类，可以这样导入：

import 'generated/user.dart';

2. 使用 fromJson 和 toJson 方法

生成的类提供了 fromJson 和 toJson 方法，便于与 API 数据交互。

接收 API 数据

当从 API 接收数据时（例如通过 HTTP GET 请求），可以使用 fromJson 方法将 JSON 转换为 Dart 对象。

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'generated/user.dart';

Future<User> fetchUser(String userId) async {
  final response = await http.get(Uri.parse('https://api.example.com/users/$userId'));

  if (response.statusCode == 200) {
    // 将 JSON 响应转换为 User 对象
    return User.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load user');
  }
}

发送 API 数据

当需要发送数据到 API 时（例如通过 HTTP POST 请求），可以使用 toJson 方法将 Dart 对象转换为 JSON 映射。

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'generated/user.dart';

Future<void> createUser(User user) async {
  final response = await http.post(
    Uri.parse('https://api.example.com/users'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(user.toJson()),
  );

  if (response.statusCode != 201) {
    throw Exception('Failed to create user');
  }
}

3. 处理嵌套 JSON 结构

如果 API 返回嵌套的 JSON 结构，也可以使用生成的类来处理嵌套对象。

例如，如果 User 对象包含一个 Address 字段，可以使用 Address 类：

import 'generated/user.dart';
import 'generated/address.dart';

void main() {
  final address = Address(
    street: '123 Main St',
    city: 'Metropolis',
    country: Country(name: 'Wonderland', code: 'WL'),
  );
  final user = User(id: 1, name: 'John Doe', address: address);

  // 转换为 JSON 用于 API 使用
  print(user.toJson());
}

注意事项

• 脚本支持基本类型（int、double、bool、String）以及嵌套对象和列表。
• 如果 JSON 结构发生变化，需要重新生成 Dart 类以反映更改。

常见问题

• 输入文件未找到错误: 确保 JSON 文件路径正确。
• 嵌套 JSON 对象问题: 确保生成的文件正确导入到相应的类中。

贡献

欢迎通过提交问题或拉取请求贡献代码，如果有建议或发现 bug，请随时告知！

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用生成的类。

import 'package:flutter/material.dart';

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'generated/user.dart';

Future<User> fetchUser(String userId) async {
  final response = await http.get(Uri.parse('https://api.example.com/users/$userId'));

  if (response.statusCode == 200) {
    // 将 JSON 响应转换为 User 对象
    return User.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load user');
  }
}

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DartiFY Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Dartify Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    fetchUser('1'); // 示例调用
  }

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}