flutter json解析

在移动端开发的时候json解析是我们非常常用的一项技术，在android平台开发的时候只需要借助Gson就能做到快速解析Json，只需要写一个Bean类就可以了，但是flutter中是不能反射的，所以json解析起来就特别麻烦，接下来我就为大家说一下flutter上的json解析。

先看下效果图： 1554779315544.gif

1. 添加依赖

dependencies:
  flutter:
    sdk: flutter
  dio: 2.1.0
  redux: ^3.0.0
  shared_preferences: ^0.5.1+2
  flutter_redux: ^0.5.2
  path_provider: ^0.4.1
  #json解析
  json_serializable: ^2.1.1
  #banner图
  banner_view: ^1.1.2
  jpush_flutter: ^0.0.11
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
    #这个是需要添加的帮助生成的依赖
  build_runner: ^1.3.1

---

2. 复制我们所需要解析的json在使用：json帮助工具可以生成对应的bean文件，当然你也可以手写，右上角的输入框输入想名命的类名

3. 创建bean类，将右面的代码粘贴其中，报错不用管

   
   image.png

4. 在命令行中输入,执行，就能在你对应的文件下面找到.g.dart文件，在原文件中，将报错的部分的代码删除就行了,接下啦就可以使用了，

flutter packages pub run build_runner build

我们来简单的封装一下dio

import 'dart:io';
import 'package:cookie_jar/cookie_jar.dart';
import 'package:dio/dio.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
class HttpHelper {
  static const GET = "GET";
  static const POST = "POST";
  static const baseUrl = "https://www.wanandroid.com/";
  static Dio _dio;
  PersistCookieJar _cookieJar;///Cookie持久化
  HttpHelper._intance() {
    _dio = Dio();
    _dio.options.baseUrl = baseUrl;
    _dio.options.connectTimeout = 5000;
    _dio.options.receiveTimeout = 3000;
    _initDio();
  }
  static HttpHelper _netUtil;
  factory HttpHelper() {
    return _netUtil ??= HttpHelper._intance();///使用工厂构造函数来实现单例
  }

  void _initDio() async{
    var directory = await getApplicationDocumentsDirectory();
    var path = Directory(join(directory.path, "cookie")).path;
    _cookieJar = PersistCookieJar(dir: path);
    _dio.interceptors.add(CookieManager(_cookieJar));
  }
  Future<Response> request(url,{data,String method=GET})async{
    try{
      _dio.options.method=method;
      var reponse =await _dio.request(url,data: data);
      return reponse;
    }catch(e){
      print(e.toString());
      return null;
    }
  }
}

在封装一下dio请求的具体方法

import 'package:dio/dio.dart';
import 'package:flutter_app/bean/ban.dart';
import 'package:flutter_app/http/netutil.dart';

class DioData{
  static _filtration(Response response,callBack(t)){
    if(response.statusCode==200){
      callBack(response.data);
    }else {
      callBack(null);
    }
  }
  static banner(callBack(t)) async{
    var response=await HttpHelper().request("banner/json");
    _filtration(response, (t){
      callBack(Ban.fromJson(t));
    });
  }
}

在初始化方法中调用

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getData();
  }
 _getData() async {
     await DioData.banner((t) {
       _ban = t;
     });
     setState(() {});///刷新界面
   }

创建一个bannerVIew

  ///banner图
  Ban _ban;
  _bannerView() {
    List<Widget> _list = _ban?.data?.map((item) {
      return Image.network(item.imagePath, fit: BoxFit.cover);
    })?.toList();
    return _list == null
        ? Text("当前没有数据")
        : BannerView(
            _list,
            intervalDuration: const Duration(seconds: 3),
          );
  }

在界面上使用

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试demo"),
      ),
      body: Container(
        child:  _bannerView(),
        height: MediaQuery.of(context).size.height * 0.3,
      ),
    );
  }