Flutter JsonToDart 工具

JsonToDart 相關文章

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

做Flutter快1年半了，從開始的就是幹

到現在寫程式碼也會注意規範，效能，註釋，各種細節。一個好的工具能提高我們的工作效率，

這次更新 JsonToDart主要是以下考慮:

• 之前開發的時候就是為了方便開發，快速生成dart程式碼，也沒有太注意dart的程式碼規範。
• 之前的版本因為Flutter桌面的不完善，是通過go-flutter來最終生成產物的。Flutter sdk版本已經來到1.18，桌面功能進一步完善，是時候重新編譯來一波了
• Github 在國內速度實在太慢，於是考慮安裝包和網頁版本移動到Gitee上面供大家使用

下載安裝

• UWP 微軟商店 我這次放微軟商店了，Windows10的窗戶小夥伴建議使用這個，如果更新也是自動的。 點選連結或者開啟微軟商店搜尋JsonToDart。

  

• WPF for Windows 為Windows7，8 的窗戶使用者準備了WPF版本的安裝包

• UWP for Windows10 如果微軟商店大姨媽了，你可以直接在這裡下載安裝包，安裝方法可以檢視之前的文章

• Flutter for Macos Flutter一波帶走全平臺，真香，為馬克兒使用者提供的app，直接拖到應用程式裡面就好了

• Flutter for Web 懶得安裝？？ 好嘛，這裡還有網頁版本，不過建議還是用其他版本，js 沒法區分double 和 int的問題，如果一定要用，建議到時候開啟資料型別全方位保護，具體請看後面

使用

左邊是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類結構，在右邊一列，就是屬性訪問器型別設定

選項：

• 預設
• Final
• Get
• GetSet

頂部設定修改，下面子項都會修改。你也可以單獨對某個屬性進行設定。

修改json類資訊

點選格式化之後，右邊會顯示視覺化的json類結構。

第一列為在json中對應的key

第二列為屬性型別/類的名字。如果是類名，會用黃色背景提示

第三列是屬性的名字，輸入選項如果為空，會報紅提示

第四列是屬性的訪問器型別

生成Dart

做好設定之後，點選生成Dart按鈕，左邊就會生成你想要的Dart程式碼，並且提示“Dart生成成功，已複製到剪下板”，可以直接複製到你的Dart檔案裡面

舉個例子

比如說業務中，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的時候根據不同情況解析不同的資料模型，就是經常大家問的，支不支援泛型。。話說。這個服務端同一個介面，返回不同的資料型別模型，不知道是業界常態還是。。

  

最慘就是這些程式碼寫後設資料模型裡面了，下一次更新的時候只好手寫。簡單的模型還好，大的模型千把行，真的是醉了。

• 可惜的是dart並沒有支援partial將類進行拆分，不得不說還是我軟牛逼，C#牛逼。不知道dart什麼時候會支援。

打包的過程

整個打包時在Flutter 1.18，也記錄一下過程。

Flutter for Windows

• 在windows機器上面用vscode開啟專案，刪掉windows目錄，執行flutter create . 將重新生成windows資料夾(以前只能手動去官方複製)

• Flutter也是與時俱進啊，要求Visual Studio 2019

  

• 執行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.圖示在這裡，用自己的圖示替換掉

  

2.預設app名字是Flutter，用xcode開啟runner.xcodeproj，在Build Settings選項中搜尋product name修改即可，

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倉庫

  

• 從gitee clone flutter倉庫

  

• 註冊，直接用github賬號登入就好了

  

• 新建一個倉庫

• 拖動到最下面，匯入已有倉庫

  

• 輸入github的倉庫地址，比如這裡是flutter

• 等待一分鐘(很快)，倉庫建立完畢

• clone到本地即可

• 同步github的倉庫，倉庫名字右邊有一個重新整理按鈕，可以把github的倉庫同步過來

• 本地修改程式碼更新到github

終端中輸入 git remote add github https://github.com/flutter/flutter

修改程式碼commit之後輸入 git push github, 完美！

• 以後遇到難以下載的github倉庫一定記得用這個辦法，大大提高效率。

結語

要不是因為想偷懶，人類就不會發明工具。不是因為製造工具，也不會在這個過程中學習到更多。歡迎加入Flutter Candies成為工具人。 (QQ群:181398081)

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