Flutter JsonToDart 工具

JsonToDart 相关文章

• Flutter 功能最全的JsonToDart工具(桌面Web海陆空支持)
• Flutter JsonToDart Mac版 lei了，真的不mark吗
• Flutter JsonToDart 工具

做Flutter快1年半了，从开始的就是干

image

到现在写代码也会注意规范，性能，注释，各种细节。一个好的工具能提高我们的工作效率，

这次更新 JsonToDart主要是以下考虑:

• 之前开发的时候就是为了方便开发，快速生成dart代码，也没有太注意dart的代码规范。
• 之前的版本因为Flutter桌面的不完善，是通过go-flutter来最终生成产物的。Flutter sdk版本已经来到1.18，桌面功能进一步完善，是时候重新编译来一波了
• Github 在国内速度实在太慢，于是考虑安装包和网页版本移动到Gitee上面供大家使用

下载安装

• UWP 微软商店 我这次放微软商店了，Windows10的窗户小伙伴建议使用这个，如果更新也是自动的。
  点击链接或者打开微软商店搜索JsonToDart。
  

  image

• WPF for Windows 为Windows7，8 的窗户用户准备了WPF版本的安装包

• UWP for Windows10 如果微软商店大姨妈了，你可以直接在这里下载安装包，安装方法可以查看之前的文章

• Flutter for Macos Flutter一波带走全平台，真香，为马克儿用户提供的app，直接拖到应用程序里面就好了

• Flutter for Web 懒得安装？？ 好嘛，这里还有网页版本，不过建议还是用其他版本，js 没法区分double 和 int的问题，如果一定要用，建议到时候开启数据类型全方位保护，具体请看后面

使用

image

左边是json的输入框以及最后Dart生成的代码，右边是生成的Json类的结构

格式化

点击格式化按钮，将json转换为右边可视化的json类结构

更多设置

设置会全部自动保存，Flutter版本除外，需要手动保存,我还没有发现应用退出的时机，Flutter版本记得点击保存配置,手动保存一下.

数据类型全方位保护

大家一定会有被服务端坑的时候吧？ 不按规定好了的数据类型传值，导致json整个解析失败。

打开这个开关，就会在获取数据的时候加一层保护，代码如下

T asT<T>(dynamic value) {
  if (value is T) {
    return value;
  }
  if (value != null) {
    final String valueS = value.toString();
    if (0 is T) {
      return int.tryParse(valueS) as T;
    } else if (0.0 is T) {
      return double.tryParse(valueS) as T;
    } else if ('' is T) {
      return valueS as T;
    } else if (false is T) {
      if (valueS == '0' || valueS == '1') {
        return (valueS == '1') as T;
      }
      return bool.fromEnvironment(value.toString()) as T;
    }
  }
  return null;
}

数组全方位保护

在循环数组的时候，一个出错，导致json整个解析失败的情况，大家遇到过吧？

打开这个开关，将对每一次循环解析进行保护，代码如下

void tryCatch(Function f) {
  try {
    f?.call();
  } catch (e, stack) {
    debugPrint("$e");
    debugPrint("$stack");
  }
}

遍历数组次数

在服务器返回的数据中，有时候数组里面不是每一个item都带有全部的属性，

如果只检查第一个话，会存在属性丢失的情况

你可以通过多次循环来避免丢失属性

选项有1，20，99

99就代表循环全部进行检查

属性命名

Dart 命名规范

属性命名规范选项：

• 保持原样
• 驼峰式命名小驼峰 josnToDart
• 帕斯卡命名大驼峰 JsonToDart
• 匈牙利命名下划线 json_to_dart

Dart 官方推荐 驼峰式命名小驼峰

属性排序

对属性进行排序

排序选项：

• 保持原样
• 升序排列
• 降序排序

添加保护方法

是否添加保护方法。数据类型全方位保护/数组全方位保护 这2个开启的时候会生成方法。
第一次使用的时候开启就可以了，你可以方法提出去放一个dart文件里面(并且在文件头中加入引用)。
后面生成的时候就没必要再开启了。

文件头部信息

可以在这里添加copyright，improt dart，创建人信息等等，支持[Date yyyy MM-dd]来生成时间，Date后面为日期格式。

比如[Date yyyy MM-dd] 会将你生成Dart代码的时间按照yyyy MM-dd的格式生成对应时间

属性访问器类型

点击格式化之后，右边会显示可视化的json类结构，在右边一列，就是属性访问器类型设置

image

选项：

• 默认
• Final
• Get
• GetSet

顶部设置修改，下面子项都会修改。你也可以单独对某个属性进行设置。

修改json类信息

image

点击格式化之后，右边会显示可视化的json类结构。

第一列为在json中对应的key

第二列为属性类型/类的名字。如果是类名，会用黄色背景提示

第三列是属性的名字，输入选项如果为空，会报红提示

第四列是属性的访问器类型

生成Dart

做好设置之后，点击生成Dart按钮，左边就会生成你想要的Dart代码，并且提示“Dart生成成功，已复制到剪切板”，可以直接复制到你的Dart文件里面

举个栗子

image

比如说业务中，Person，有名字年龄

import 'dart:convert';
import 'util.dart';
part 'person_part.dart';

class Person {
  Person({
    this.age,
    this.name,
  });

  factory Person.fromJson(Map<String, dynamic> jsonRes) =>
      Person(age: asT<int>(jsonRes['age']), name: asT<String>(jsonRes['name']));

  final int age;
  final String name;

  Map<String, dynamic> toJson() => <String, dynamic>{
        'age': age,
        'name': name,
      };

  @override
  String toString() {
    return json.encode(this);
  }
}

现在前端有业务逻辑，需要知道这个人是小孩子，年轻人还是老人。那么我们应该怎么做？直接写这个类里面？

当然可以，
但是如果服务器以后变更这个数据模型，那么我们用工具直接生成代码复制，那我们的业务代码是不是就会丢掉？

幸运的是

dart 为我们提供了扩展 extension，你需要

• 设置dart sdk >=2.6

environment:
  sdk: '>=2.6.0 <3.0.0'

• Flutter项目根目录创建一个analysis_options.yaml文件，然后添加以下内容到文件中。

analyzer:
    enable-experiment:
        - extension-methods

然后你可以这样做。

part of 'person.dart';

enum AgeType {
  baby,
  youth,
  old,
}

extension PersonE on Person {
  AgeType get ageType {
    if (age < 5) {
      return AgeType.baby;
    } else if (age < 50) {
      return AgeType.youth;
    }
    return AgeType.old;
  }

}

这样任你Person元数据模型修改的时候，原本写的业务逻辑也不会需要重写，只需要再次运行工具即可。

不足

• 对于一些需要修改属性的场景，用mixin混入或者干脆把这个属性设置为可写，还是没法摆脱

mixin PersonMixin  {
   int currentAge;
}

• 在解析json的时候根据不同情况解析不同的数据模型，就是经常大家问的，支不支持泛型。。话说。这个服务端同一个接口，返回不同的数据类型模型，不知道是业界常态还是。。

  
  image

最惨就是这些代码写元数据模型里面了，下一次更新的时候只好手写。简单的模型还好，大的模型千把行，真的是醉了。

image

• 可惜的是dart并没有支持partial将类进行拆分，不得不说还是我软牛逼，C#牛逼。不知道dart什么时候会支持。

打包的过程

整个打包时在Flutter 1.18，也记录一下过程。

Flutter for Windows

• 在windows机器上面用vscode打开项目，删掉windows目录，执行flutter create . 将重新生成windows文件夹(以前只能手动去官方复制)

• Flutter也是与时俱进啊，要求Visual Studio 2019

  
  image

• 执行flutter build windows,执行完毕之后将在build/windows/下面找到打包出来的exe

支持复制粘贴全选这些快捷键了，go-flutter可以不用了。唯一的问题是我发现粘贴的时候会在前面加上一个乱码。

• 悄悄说下，Flutter for UWP 应该快来了，不要问为什么，反正我就是知道。

Flutter for Macos

• 在mac机器上面用vscode打开项目，删掉macos目录，执行flutter create . 将重新生成macos文件夹,mac是官方支持最好的桌面端，无大问题。

• 执行flutter build macos,执行完毕之后将在build/macos/下面找到打包出来的app

• 这里讲一下怎么修改app的图标和名字
  1.图标在这里，用自己的图标替换掉

  
  image

2.默认app名字是Flutter，用xcode打开runner.xcodeproj，在Build Settings选项中搜索product name修改即可，

image

Flutter for Web

• 用vscode打开项目，删掉web目录，执行flutter create . 将重新生成web文件夹，注意我index.html里面有引用一个js，用来保存设置的

• 执行flutter build web,执行完毕之后将在build/web/下面找到打包出来的文件

格式化Dart代码

之前一直没有做这个事情，就是生成的代码，我没有做格式化，我想的是你可以复制到项目里面自己format。但是做，就要做的漂亮，完美。下面我分享下已知的几种格式化方法:

使用终端格式化Dart文件

这是做注解路由(
ff_annotation_route)的时候，低调大佬pr的,最终调用终端执行flutter format xxx.dart.

Future<void> formatFile(File file) async {
  if (file == null) {
    return;
  }

  if (!file.existsSync()) {
    print(red.wrap('format error: ${file?.absolute?.path} doesn\'t exist\n'));
    return;
  }

  processRunSync(
    executable: 'flutter',
    arguments: 'format ${file?.absolute?.path}',
    runInShell: true,
  );
}

void processRunSync({
  String executable,
  String arguments,
  bool runInShell = false,
}) {
  final ProcessResult result = Process.runSync(
    executable,
    arguments.split(' '),
    runInShell: runInShell,
  );
  if (result.exitCode != 0) {
    throw Exception(result.stderr);
  }
  print('${result.stdout}');
}

使用网络请求格式化Dart文件

由于做UWP的时候没法调用终端，所以我在群里问了下有没有其他方式。果然群众是牛逼的，保洁大佬发现了一个用网络请求做dart格式化的方法。他跑去抓DartPad,不亏是前端大佬。

请求地址

• 国内https://dart-services.dartpad.cn/api/dartservices/v2/format
• 国外https://dart-services.appspot.com/api/dartservices/v2/format
• 使用post请求json {"source","dart代码"},返回{"newstring","格式化之后的dart代码"}

使用Dart Style

在我写好UWP的dart 格式化的时候，保洁大佬又丢了一个链接，可以直接用Dart Style来做format。

2行代码，太简单了！有一群小伙伴真好。。

final DartFormatter formatter = DartFormatter();
result = formatter.format(result);

Github 太慢

最近使用github实在是太慢了，其实低调大佬很早就告诉我一个方法，就是把Github的库同步到gitee上面，然后再从gitee上面下载，我一直懒没有尝试，最近实在受不了，试了一下，真香！

• 从github clone flutter仓库

  
  image

• 从gitee clone flutter仓库

  
  image

• 注册，直接用github账号登录就好了

  
  image

• 新建一个仓库

image

• 拖动到最下面，导入已有仓库

  
  image

• 输入github的仓库地址，比如这里是flutter

image

• 等待一分钟(很快)，仓库创建完毕

image

• clone到本地即可

image

• 同步github的仓库，仓库名字右边有一个刷新按钮，可以把github的仓库同步过来

image

• 本地修改代码更新到github

终端中输入 git remote add github https://github.com/flutter/flutter

修改代码commit之后输入 git push github, 完美！

• 以后遇到难以下载的github仓库一定记得用这个办法，大大提高效率。

结语

要不是因为想偷懒，人类就不会发明工具。不是因为制造工具，也不会在这个过程中学习到更多。欢迎加入Flutter Candies成为工具人。 (QQ群:181398081)

最最后放上Flutter Candies全家桶，真香。

image