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

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

结合json2dart(安全转换的插件)和json2dart_dbffi(数据库的插件)两个组件,可以查询当前数据库所有的数据表和数据表内容、数据表结构等,可以满足日常开发的需要。

1. 显示数据库所有的表

显示数据库所有的表

2. 点击选中后某个表的内容

点击选中后某个表的内容

3. 点击Structure,显示数据的表结构

显示数据的表结构

接入插件

该插件是根据Ume插件规范开发的插件,使用方式与之相同,大家可以参考字节跳动的原项目。

1. pubspec.yaml接入

dependencies:
  json2dart_viewerffi: ^1.0.0+2

2. 代码接入

首先在main.dart文件中导入插件:

import 'package:json2dart_viewerffi/json2dart_viewerffi.dart';

然后在应用初始化时注册插件:

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 注册插件
    PluginManager.instance
      ..register(const DBViewer())
      ..register(const MonitorPlugin())
      ..register(const MonitorActionsPlugin())
      ..register(const WidgetDetailInspector())
      ..register(const ColorSucker())
      ..register(AlignRuler())
      ..register(const ColorPicker()) // 新插件
      ..register(const TouchIndicator()) // 新插件
      ..register(Performance())
      ..register(const ShowCode())
      ..register(const MemoryInfoPage())
      ..register(CpuInfoPage())
      ..register(const DeviceInfoPanel())
      ..register(Console())
      ..register(DioInspector(dio: HttpManager.instance.getDio()));
  }
}

完整示例Demo

下面是一个完整的示例,展示了如何在Flutter应用中使用json2dart_viewerffi插件。

import 'package:flutter/material.dart';
import 'package:json2dart_viewerffi/json2dart_viewerffi.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 Model Viewer'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 注册插件
    PluginManager.instance
      ..register(const DBViewer())
      ..register(const MonitorPlugin())
      ..register(const MonitorActionsPlugin())
      ..register(const WidgetDetailInspector())
      ..register(const ColorSucker())
      ..register(AlignRuler())
      ..register(const ColorPicker()) // 新插件
      ..register(const TouchIndicator()) // 新插件
      ..register(Performance())
      ..register(const ShowCode())
      ..register(const MemoryInfoPage())
      ..register(CpuInfoPage())
      ..register(const DeviceInfoPanel())
      ..register(Console())
      ..register(DioInspector(dio: HttpManager.instance.getDio()));
  }
}

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

1 回复

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


json2dart_viewerffi 是一个用于将 JSON 数据转换为 Dart 模型的插件。它可以帮助开发者快速生成 Dart 类,从而简化 JSON 数据的处理过程。以下是使用 json2dart_viewerffi 插件的步骤:

1. 安装插件

首先,你需要在 pubspec.yaml 文件中添加 json2dart_viewerffi 依赖:

dependencies:
  json2dart_viewerffi: ^1.0.0 # 请根据实际情况选择最新版本

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

2. 使用插件生成 Dart 模型

json2dart_viewerffi 提供了一个命令行工具来生成 Dart 模型。你可以通过以下步骤来使用它:

2.1 创建一个 JSON 文件

首先,你需要准备一个 JSON 文件,例如 example.json

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

2.2 使用命令行工具生成 Dart 模型

在终端中运行以下命令来生成 Dart 模型:

flutter pub run json2dart_viewerffi:generate -i example.json -o example_model.dart -c ExampleModel
  • -i: 输入 JSON 文件路径。
  • -o: 输出 Dart 文件路径。
  • -c: 生成的 Dart 类名。

2.3 查看生成的 Dart 模型

生成的 example_model.dart 文件内容如下:

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

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

  ExampleModel.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    age = json['age'];
    email = json['email'];
    isActive = json['isActive'];
    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;
    data['isActive'] = isActive;
    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;
  }
}

3. 使用生成的 Dart 模型

你可以在你的 Flutter 项目中使用生成的 Dart 模型来解析和生成 JSON 数据。

import 'example_model.dart';

void main() {
  var json = {
    "name": "John Doe",
    "age": 30,
    "email": "john.doe@example.com",
    "isActive": true,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA",
      "zip": "12345"
    },
    "phoneNumbers": [
      {
        "type": "home",
        "number": "555-555-5555"
      },
      {
        "type": "work",
        "number": "555-555-1234"
      }
    ]
  };

  var exampleModel = ExampleModel.fromJson(json);
  print(exampleModel.name); // 输出: John Doe

  var jsonOutput = exampleModel.toJson();
  print(jsonOutput); // 输出: 转换后的 JSON 数据
}
回到顶部