写这篇文章的时候,dio包还是1点几版本,现在都2点几版本了。
写这篇文章的时候,很多描述也不是很清楚,其实可以更简化一些,如果想多方位了解一些,可移步这里: https://www.cnblogs.com/leiting/p/11031888.html 查看更多,第三点也实现了封装请求数据方式
如题,在前端,是个很简单的ajax请求,json的显示,取值都很方便,换用dart之后,除了层层嵌套写的有点略难受之外,还有对json的使用比js要麻烦
1. 可以先封装一下get和post请求,安装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, ), ), ); } }