flutter 从接口获取json数据显示到页面

如题，在前端，是个很简单的ajax请求，json的显示，取值都很方便，换用dart之后，除了层层嵌套写的有点略难受之外，还有对json的使用比js要麻烦

1. 可以先封装一下get和post请求，用flutter带的dio包

netutils.dart

import 'dart:async';

import 'package:dio/dio.dart';

var dio = new Dio();

class NetUtils {
  static Future get(String url, {Map<String, dynamic> params}) async {
    var response = await dio.get(url, data: params);
    return response;
  }

  static Future post(String url, Map<String, dynamic> params) async {
    var response = await dio.post(url, data: params);
    return response;
  }
}

2. 发起请求

// 要用到的几个包 刚封装的发请求的netutils json转换的convert包
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:yourprojectname/utils/netutils.dart';

class Model {
  final String username;
  final String avatar;
  final String nickname;

  Model({this.username, this.avatar, this.nickname});
  factory Model.fromJson(Map<String, dynamic> json) {
    return new Model(
      username: json['username'],
      avatar: json['avatar'],
      nickname: json['nickname'],
    );
  }
}

class _UserInfoState extends State<UserInfo> {
  // 先定义一下未登录信息
  Object info = {
    "username": "点此登录/注册",
    "avatar": "http://g.hiphotos.baidu.com/zhidao/pic/item/d833c895d143ad4bd74bac3f85025aafa50f06e3.jpg",
    "nickname": "未登录",
  };

  void _getUserInfo() async {
    setState(() {
      info = new Model.fromJson(info);
    });
    try {
      var res = await NetUtils.get(
          "https://yourrequestaddress");
      if (res != null) {
        Map<String, dynamic> json = jsonDecode(res.toString())["data"];
        if (json["nickname"] != '') {
          setState(() {
            info = new Model.fromJson(json);
          });
        }
        print(info);
      }
    } catch (e) {
      print(e);
    }
  }

  @override
  void initState() {
    super.initState();
    _getUserInfo();
  }

  @override
  Widget build(BuildContext context) {
    Model model = this.info;
    print(model);
    return Container(
      height: 141.0,
      margin: EdgeInsets.only(bottom: 20.0),
      alignment: Alignment.topLeft,
      child: DecoratedBox(
        decoration: BoxDecoration(
            boxShadow: [BoxShadow(color: Colors.white70)],
            image: DecorationImage(
                image: AssetImage("assets/mine/userbg.png"),
                fit: BoxFit.cover)),
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(bottom: 30.0, left: 30.0),
              child: ClipOval(
                child: SizedBox(
                  width: 70.0,
                  height: 70.0,
                  //
                  child: Image(
                    image: NetworkImage("${model.avatar}"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20.0),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(left: 0.0),
                    child: Text(
                      '${model.nickname}',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: 23.0,
                        height: 1.2,
                      ),
                    ),
                  ),
                  buildLoginChild(model),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 根据返回值的不同显示不同的内容
Widget buildLoginChild(value) {
  if (value.nickname == '未登录') {
    return Container(
        height: 20.0,
        padding: EdgeInsets.only(left: 20.0),
        child: FlatButton(
          padding: EdgeInsets.all(0.0),
          child: Text(
            '${value.username}',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 14.0,
              height: 1.2,
            ),
          ),
          onPressed: () {
            print('点击登录');
          },
        ));
  } else {
    return Padding(
      padding: EdgeInsets.only(left: 32.0),
      child: Text(
        '用户名：${value.username}',
        textAlign: TextAlign.left,
        style: TextStyle(
          fontSize: 14.0,
          height: 1.2,
        ),
      ),
    );
  }
}