Flutter json_serializable详细使用（小白教程）

我会带着你远行 2021-09-29 09:30 562阅读 0赞

> 一开始用的JsonBeanFactory，可能跟gsonformat差不多，但是在使用过程中，一键解析的操作，经常导致解析失败，总是提示类型转换错误，

**重点：**后面就用了json\_serializable这个解析工具，可能看起来有些麻烦，但是也有情况会出现类型转换的问题，这时候你就要认真去对比一下服务器数据跟解析出来的数据类型了。

##### （1）关于JsonBeanFactory #####

JsonBeanFactory的可以查看这篇文章：[FlutterJsonBeanFactory插件json使用][FlutterJsonBeanFactory_json]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
插件就是上面的这个截图

#### （2）json\_serializable的使用 ####

（1）yaml配置文件关联

json_serializable: ^3.0.0
      build_runner: ^1.6.1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]  
可以在`https://pub.dev/packages/`这个库进行搜索，使用最新的版本。

（2）打开网站，建议收藏：[https://caijinglong.github.io/json2dart/index.html][https_caijinglong.github.io_json2dart_index.html]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]

上面图说了步骤：这里再说一下，选择v1.x.x，然后命名一个类，在工程中创建一个dart文件（如圈出来的3），然后把你的json放到第四个位置里，得到的右边的便是你所要的bean对象了。

（3）把bean对象张贴进去，这时候会报错，此时你不需要进行操作，只需要进行下面的第四步操作。

（4）Terminal运行：flutter packages pub run build\_runner build，自动生成g.dart  
在工程的Terminal下运行代码： 这是一个实时监控bean中类型变化的。主要依赖库build\_runner

flutter packages pub run build_runner build

输出内容

D:\AS\Flutter>flutter packages pub run build_runner watch
    [INFO] Generating build script...
    [INFO] Generating build script completed, took 274ms
    
    [INFO] Setting up file watchers...
    [INFO] Setting up file watchers completed, took 8ms
    
    [INFO] Waiting for all file watchers to be ready...
    [INFO] Waiting for all file watchers to be ready completed, took 329ms
    
    [INFO] Initializing inputs
    [INFO] Reading cached asset graph...
    [INFO] Reading cached asset graph completed, took 91ms
    
    [INFO] Checking for updates since last build...
    [INFO] Checking for updates since last build completed, took 2.1s
    
    [INFO] Running build...
    [INFO] Running build completed, took 21ms
    
    [INFO] Caching finalized dependency graph...
    [INFO] Caching finalized dependency graph completed, took 47ms
    
    [INFO] Succeeded after 73ms with 0 outputs (0 actions)

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]

（5） 下面就看见我们生成的bean的对象，以及g.dart文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 4]

看下g.dart文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 5]

以上就是个人小白亲自操作教程，暂且就这么多。

--------------------

更多资源请访问：

[超详细图文搭建个人免费博客][Link 1]

关注「蛇崽网盘教程资源」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。

在微信后台回复「130个小程序」，即可免费领取享有导入就能跑的微信小程序

![在这里插入图片描述][20181106111014905.png]

[FlutterJsonBeanFactory_json]: https://www.jianshu.com/p/14cbcbaa74b7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/130012c9e66348418372ddec9ccbf528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210529/de99ff86fcef4f4394d0e844c6b62833.png
[https_caijinglong.github.io_json2dart_index.html]: https://caijinglong.github.io/json2dart/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]: /images/20210529/485f0bf22be44b979d293c40ef5738d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 3]: /images/20210529/3bbdf8322b7f4dc08234b90ab5b6da30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 4]: /images/20210529/38bfbf2f7e4d4ed08a6b3c55a7a7e4d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 5]: /images/20210529/53b3cf0ce66642329261b831a4f1415d.png
[Link 1]: https://blog.csdn.net/xudailong_blog/article/details/78762262
[20181106111014905.png]: /images/20210529/748bcc9ca45142f89ab572f2ae7c52eb.png