Flutter模型生成插件model_gen_kit的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter模型生成插件model_gen_kit的使用

Model Gen Kit

自动使用IntelliJ插件生成带有JsonSerializable、copyWith和toString方法的Dart模型类。

（不依赖于build_runner。）

Jetbrain插件：

Pub.dev：

安装

  1. 在pubspec.yaml文件中添加依赖：
dependencies:
  model_gen_kit: ^0.1.2
  1. 在IntelliJ（或Android Studio）上安装插件 “Dart Model Generate Kit”。

使用

  1. 创建一个空的dart文件，并在文件中输入 gm 然后按回车键。（无需为枚举创建）
  2. 编写你的模型类名及其参数。
  3. 按下 option(alt) + m 生成模型类。

示例代码

import 'package:model_gen_kit/model_gen_kit.dart';

void main() {
  final user = User(
    id: 1,
    name: "John",
  );

  print(user);
  print(user.toJson());
  print(User.fromJson(user.toJson()));

  final dynamic errorUserJson = {
    "uid": 1,
    "name": "John",
    "email": 34567,
  };

  print(User.fromJson(errorUserJson));
}

///
/// 1. 在IntelliJ（或Android Studio）上安装插件 "Dart Model Generate Kit"
/// 2. 创建一个空的dart文件，并在文件中输入 `gm` 然后按回车键。
/// 3. 编写你的模型类名及其参数。
/// 4. 按下 `option + shift + enter`（或 `alt + shift + enter`）生成模型类。
///

class User with _UserExtension {
  const factory User({
    @CustomKey("uid") required int id,
    required String name,
    @DefaultVal("example@gmail.com") String email,
  }) = _User;

  const User._();

  factory User.fromJson(json) = _User.fromJson;
}

///
/// ----- 私有代码 -----
///

class _User extends User {
  [@override](/user/override)
  final int id;
  [@override](/user/override)
  final String name;
  [@override](/user/override)
  final String email;

  const _User({
    required this.id,
    required this.name,
    this.email = "example@gmail.com",
  }) : super._();

  factory _User.fromJson(json) => _UserExtension.createModelFromJson(json);
}

mixin _UserExtension {
  int get id => throw UnimplementedError();
  String get name => throw UnimplementedError();
  String get email => throw UnimplementedError();

  static _User createModelFromJson(Object json) {
    if (json
        case {
          "uid": int id,
          "name": String name,
          "email": String email,
        }) {
      return _User(
        id: id,
        name: name,
        email: email,
      );
    } else {
      throw ParseFailedException("User", json);
    }
  }

  Map<String, dynamic> toJson() => {
        "uid": id,
        "name": name,
        "email": email,
      };

  User copyWith({
    int? id,
    String? name,
    String? email,
  }) =>
      User(
        id: id ?? this.id,
        name: name ?? this.name,
        email: email ?? this.email,
      );

  [@override](/user/override)
  String toString() => 'User{id: $id, name: $name, email: $email}';
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用model_gen_kit插件来生成数据模型的示例。model_gen_kit是一个可以帮助你根据JSON数据自动生成Dart模型的插件。请注意，实际使用中你可能需要根据插件的最新文档进行调整，因为插件的功能和API可能会随着版本更新而变化。

首先，确保你已经在pubspec.yaml文件中添加了model_gen_kit依赖：

dependencies:
  flutter:
    sdk: flutter
  model_gen_kit: ^最新版本号 # 替换为实际的最新版本号

dev_dependencies:
  build_runner: ^最新版本号 # 通常用于运行代码生成任务

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

假设你有一个JSON数据如下：

{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}

1. 创建JSON文件

在项目的assets文件夹（如果没有，请创建一个）中创建一个名为sample.json的文件，并将上述JSON数据粘贴进去。确保在pubspec.yaml中声明这个JSON文件为资产：

flutter:
  assets:
    - assets/sample.json

2. 定义数据模型

虽然model_gen_kit可以自动生成模型，但你需要先定义一个空的数据类来作为生成的模板。创建一个名为user_model.dart的文件，并定义如下内容：

// user_model.dart
part 'user_model.g.dart'; // 生成的代码将会放在这个文件里

@JsonSerializable()
class UserModel {
  final int id;
  final String name;
  final String email;

  UserModel({required this.id, required this.name, required this.email});

  // 从生成的代码中获取fromJson方法
  factory UserModel.fromJson(Map<String, dynamic> json) => _$UserModelFromJson(json);

  // 从生成的代码中获取toJson方法
  Map<String, dynamic> toJson() => _$UserModelToJson(this);
}

3. 运行代码生成器

在项目的根目录下，打开终端并运行以下命令来生成模型代码：

flutter pub run build_runner build --delete-conflicting-outputs

这个命令会读取你的user_model.dart文件，并根据sample.json（或其他你指定的数据源）生成相应的fromJson和toJson方法，这些方法会被放在user_model.g.dart文件中。

4. 使用生成的数据模型

现在你可以在你的Flutter应用中使用这个数据模型了。例如，从网络获取JSON数据并解析为UserModel对象：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'user_model.dart'; // 导入生成的数据模型

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Model Gen Kit Demo'),
        ),
        body: Center(
          child: FutureBuilder<UserModel>(
            future: fetchUser(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                }
                UserModel user = snapshot.data!;
                return Text('Name: ${user.name}, Email: ${user.email}');
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }

  Future<UserModel> fetchUser() async {
    // 这里应该是网络请求，但为了演示，我们直接使用一个硬编码的JSON字符串
    String jsonString = '''
    {
      "id": 1,
      "name": "John Doe",
      "email": "john.doe@example.com"
    }
    ''';
    Map<String, dynamic> userMap = jsonDecode(jsonString);
    return UserModel.fromJson(userMap);
  }
}

在这个例子中，fetchUser函数模拟了一个网络请求，将JSON字符串解析为Map，然后使用UserModel.fromJson方法将其转换为UserModel对象。

请注意，实际项目中你应该使用HTTP客户端（如http包）来发起网络请求，而不是硬编码的JSON字符串。

希望这个示例能帮助你理解如何在Flutter项目中使用model_gen_kit插件来生成数据模型！

回到顶部