Flutter JSON转Dart模型插件flutter_json_to_dart的使用

Flutter JSON转Dart模型插件flutter_json_to_dart的使用

Json2Dart

Json2Dart 是一个将 JSON 转换为 Dart 模型的工具包。它会将你的 JSON 数据转换为字符串,该字符串是生成的 Dart 代码。你可以将生成的代码写入文件或将它显示在一个文本小部件中。


如何使用

以下是一个完整的示例代码,展示如何使用 flutter_json_to_dart 插件来生成 Dart 模型类。

示例代码

import 'dart:convert';
import 'dart:io';

import 'package:flutter_json_to_dart/flutter_json_to_dart.dart'; // 导入插件

void main(List<String> args) {
  // 定义你的 JSON 字符串
  String jsonString = '''
  {
      "weather": "sunny",
      "clouds": "no",
      "time": "11.30",
      "sports you can do": [
          "running",
          "hiking",
          "biking"
      ],
      "any map": {
          "key 1": "value 1",
          "key 2": "value 2"
      }
  }''';

  // 将 JSON 字符串解析为 Map
  Map<String, dynamic> jsonData = jsonDecode(jsonString);

  // 使用 flutter_json_to_dart 插件生成 Dart 模型代码
  final String dartCode = FlutterJsonToDart.generateDartModel(jsonData);

  // 输出 JSON 和生成的 Dart 代码
  print("Json:");
  print(jsonData);
  print("");
  print("Dart:");
  print(dartCode);

  // 将生成的 Dart 代码写入文件
  File dartCodeFile = File("${Directory.current.path}/example/generated_model.dart");
  dartCodeFile.writeAsString(dartCode);
}

代码详解

  1. 导入依赖

    import 'package:flutter_json_to_dart/flutter_json_to_dart.dart';
    

    这里我们导入了 flutter_json_to_dart 插件,用于生成 Dart 模型代码。

  2. 定义 JSON 数据

    String jsonString = '''
    {
        "weather": "sunny",
        "clouds": "no",
        "time": "11.30",
        "sports you can do": [
            "running",
            "hiking",
            "biking"
        ],
        "any map": {
            "key 1": "value 1",
            "key 2": "value 2"
        }
    }''';
    

    我们定义了一个包含嵌套结构的 JSON 数据。

  3. 解析 JSON 数据

    Map<String, dynamic> jsonData = jsonDecode(jsonString);
    

    使用 jsonDecode 方法将 JSON 字符串解析为 Dart 的 Map 对象。

  4. 生成 Dart 模型代码

    final String dartCode = FlutterJsonToDart.generateDartModel(jsonData);
    

    调用 generateDartModel 方法,传入解析后的 JSON 数据,生成对应的 Dart 模型代码。

  5. 输出 JSON 和 Dart 代码

    print("Json:");
    print(jsonData);
    print("");
    print("Dart:");
    print(dartCode);
    

    打印 JSON 数据和生成的 Dart 模型代码。

  6. 保存到文件

    File dartCodeFile = File("${Directory.current.path}/example/generated_model.dart");
    dartCodeFile.writeAsString(dartCode);
    

    将生成的 Dart 模型代码写入文件,方便后续使用。


生成的 Dart 模型代码示例

假设输入的 JSON 数据如上所示,生成的 Dart 模型代码可能如下:

class Root {
  String weather;
  String clouds;
  String time;
  List<String> sportsYouCanDo;
  Map<String, String> anyMap;

  Root({
    required this.weather,
    required this.clouds,
    required this.time,
    required this.sportsYouCanDo,
    required this.anyMap,
  });

  factory Root.fromJson(Map<String, dynamic> json) => Root(
        weather: json["weather"],
        clouds: json["clouds"],
        time: json["time"],
        sportsYouCanDo: List<String>.from(json["sports you can do"]),
        anyMap: Map.from(json["any map"]).map((k, v) => MapEntry<String, String>(k, v.toString())),
      );

  Map<String, dynamic> toJson() => {
        "weather": weather,
        "clouds": clouds,
        "time": time,
        "sports you can do": sportsYouCanDo,
        "any map": Map.from(anyMap).map((k, v) => MapEntry(k, v)),
      };
}

更多关于Flutter JSON转Dart模型插件flutter_json_to_dart的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JSON转Dart模型插件flutter_json_to_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 开发中,将 JSON 数据转换为 Dart 模型类是一个常见的需求。flutter_json_to_dart 是一个方便的工具,可以帮助你自动生成 Dart 模型类。以下是使用 flutter_json_to_dart 插件的步骤:

1. 安装插件

首先,你需要在你的 Flutter 项目中安装 flutter_json_to_dart 插件。你可以通过以下命令来安装:

flutter pub add flutter_json_to_dart

或者直接在 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter_json_to_dart: ^1.0.0

然后运行 flutter pub get 来安装依赖。

2. 使用插件生成 Dart 模型类

flutter_json_to_dart 提供了一个命令行工具,你可以通过它来生成 Dart 模型类。

假设你有一个 JSON 文件 example.json,内容如下:

{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": "12345"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "555-555-5555"
    },
    {
      "type": "work",
      "number": "555-555-1234"
    }
  ]
}

你可以使用以下命令来生成 Dart 模型类:

flutter pub run flutter_json_to_dart:generate -i example.json -o lib/models/example_model.dart

这个命令会将生成的 Dart 模型类保存到 lib/models/example_model.dart 文件中。

3. 查看生成的 Dart 模型类

生成的 Dart 模型类可能如下所示:

class ExampleModel {
  String? name;
  int? age;
  String? email;
  Address? address;
  List<PhoneNumbers>? phoneNumbers;

  ExampleModel({
    this.name,
    this.age,
    this.email,
    this.address,
    this.phoneNumbers,
  });

  ExampleModel.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    age = json['age'];
    email = json['email'];
    address = json['address'] != null ? Address.fromJson(json['address']) : null;
    if (json['phoneNumbers'] != null) {
      phoneNumbers = <PhoneNumbers>[];
      json['phoneNumbers'].forEach((v) {
        phoneNumbers!.add(PhoneNumbers.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['name'] = name;
    data['age'] = age;
    data['email'] = email;
    if (address != null) {
      data['address'] = address!.toJson();
    }
    if (phoneNumbers != null) {
      data['phoneNumbers'] = phoneNumbers!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Address {
  String? street;
  String? city;
  String? state;
  String? zip;

  Address({
    this.street,
    this.city,
    this.state,
    this.zip,
  });

  Address.fromJson(Map<String, dynamic> json) {
    street = json['street'];
    city = json['city'];
    state = json['state'];
    zip = json['zip'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['street'] = street;
    data['city'] = city;
    data['state'] = state;
    data['zip'] = zip;
    return data;
  }
}

class PhoneNumbers {
  String? type;
  String? number;

  PhoneNumbers({
    this.type,
    this.number,
  });

  PhoneNumbers.fromJson(Map<String, dynamic> json) {
    type = json['type'];
    number = json['number'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['type'] = type;
    data['number'] = number;
    return data;
  }
}

4. 在项目中使用生成的模型类

你可以在你的项目中使用生成的模型类来解析 JSON 数据。例如:

import 'package:flutter/material.dart';
import 'models/example_model.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON to Dart Example'),
        ),
        body: Center(
          child: FutureBuilder(
            future: _loadExampleData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                ExampleModel example = snapshot.data as ExampleModel;
                return Text('Name: ${example.name}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<ExampleModel> _loadExampleData() async {
    String jsonString = '''
    {
      "name": "John Doe",
      "age": 30,
      "email": "john.doe@example.com",
      "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "state": "CA",
        "zip": "12345"
      },
      "phoneNumbers": [
        {
          "type": "home",
          "number": "555-555-5555"
        },
        {
          "type": "work",
          "number": "555-555-1234"
        }
      ]
    }
    ''';
    Map<String, dynamic> jsonMap = jsonDecode(jsonString);
    return ExampleModel.fromJson(jsonMap);
  }
}
回到顶部