Flutter JSON解析插件json_convert的使用

Flutter JSON解析插件json_convert的使用

json_convert 👋

json_convert 是一个用于生成 Dart 代码的工具，支持 freezed、json_serializable 和经典模型。它可以帮助你轻松地将 JSON 文件转换为 Dart 文件，并生成相应的序列化代码。

功能特性

• JSON 文件转换为 Dart 文件：使用 dart run json_convert 命令。
• 生成 file.g.dart 或 file.freezed.dart 文件：使用 build_runner 插件，运行 dart run json_convert build 命令。
• 清除生成的配置文件：使用 dart run json_convert clear 命令。

入门指南

1. 添加 JSON 文件： 将 JSON 文件放在 assets/ 文件夹中。例如，创建 assets/json_convert/user.json 和 assets/json_convert/city.json 文件。

   user.json：

   {
      "name": "Babak",
      "nickname": "BabakCode",
      "websiteAddress": "http://babakcode.com",
      "age": 23,
      "location": {
         "lat": 34.12,
         "lng": 46.22341
      },
      "posts": [
         {
            "name": "Get datatype in dart",
            "description": "Use `is` to identify the data type"
         },
         {
            "name": "show image in flutter",
            "description": "Use Image.asset to load images from asset folder"
         }
      ]
   }
   

   city.json：

   {
      "name": "San Diego",
      "population": 3500000,
      "populationStr": "3.5mil",
      "country": {
         "_id": 23,
         "name": "USA"
      }
   }
   

   

2. 生成 Dart 文件： 运行以下命令生成 Dart 文件：

   dart run json_convert
   

   生成的 Dart 文件将保存在 lib/models 文件夹中：

使用步骤

1. 选择 JSON 文件目录： 默认的 JSON 文件目录是 assets/json_models，你可以按 Enter 键继续使用默认目录，或者输入新的目录路径。例如，输入 types 文件夹作为根目录。

   Default json files directory is: `assets/json_models`
   Would you like to change directory?
   [Press Enter / Write new dir location]:
   

2. 选择导出类型： 选择导出类型，输入数字或名称（classic、json_serializable、freezed）。

   Please select export type:
   1. classic
   2. json_serializable
   3. freezed
   Write [1-3] or [classic, json_serializable, freezed]:
   

   注意：classic 类型不需要运行 dart run json_convert build，但 freezed 和 json_serializable 需要。

3. 完成选中类型的方法检查： 根据提示选择是否添加方法。

4. 选择导出目录： 默认导出目录是 lib/models，你可以按 Enter 键继续使用默认目录，或者输入新的目录路径。例如，输入 entities 文件夹作为 lib 目录下的子目录。

   Export location inside lib folder: `models`
   Do you want to change it?
   [Press Enter / Write new location]:
   

   注意：不要在地址前包含 lib！

完整示例 Demo

以下是一个完整的 Flutter 示例项目，展示了如何使用 json_convert 生成的 Dart 模型类进行 JSON 解析和显示。

main.dart：

import 'package:flutter/material.dart';
import 'package:json_convert_example/models/user.dart'; // 导入生成的用户模型
import 'package:json_convert_example/models/city.dart'; // 导入生成的城市模型

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo 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> {
  late User _user;
  late City _city;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化用户和城市数据
    _user = User.fromJson({
      "name": "Babak",
      "nickname": "BabakCode",
      "websiteAddress": "http://babakcode.com",
      "age": 23,
      "location": {
        "lat": 34.12,
        "lng": 46.22341
      },
      "posts": [
        {
          "name": "Get datatype in dart",
          "description": "Use `is` to identify the data type"
        },
        {
          "name": "show image in flutter",
          "description": "Use Image.asset to load images from asset folder"
        }
      ]
    });

    _city = City.fromJson({
      "name": "San Diego",
      "population": 3500000,
      "populationStr": "3.5mil",
      "country": {
        "_id": 23,
        "name": "USA"
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("User Information:", style: Theme.of(context).textTheme.headline6),
            Text("Name: ${_user.name}"),
            Text("Nickname: ${_user.nickname}"),
            Text("Website: ${_user.websiteAddress}"),
            Text("Age: ${_user.age}"),
            Text("Location: (${_user.location.lat}, ${_user.location.lng})"),
            const SizedBox(height: 20),
            Text("Posts:", style: Theme.of(context).textTheme.headline6),
            ..._user.posts.map((post) => ListTile(
              title: Text(post.name),
              subtitle: Text(post.description),
            )).toList(),
            const SizedBox(height: 40),
            Text("City Information:", style: Theme.of(context).textTheme.headline6),
            Text("Name: ${_city.name}"),
            Text("Population: ${_city.populationStr}"),
            Text("Country: ${_city.country.name}"),
          ],
        ),
      ),
    );
  }
}