一、
二、
什么是Http?
Http是Flutter用于网络请求的跨平台的插件。
三、如何用http库做get请求?
--在pubspec.yaml中引入http插件;
--调用http.get发送请求
1、http.get()返回一个包含http.Response的Future:
Futrue:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误;
http.Response:类包含一个成功的HTTP请求接收到的数据;
四、如何用http库做post请求?
--在pubspec.yaml中引入http插件
--调用http.post发送请求
1、http.post()返回一个包含http.Response的Future:
Future:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误;
2、http.Response:类包含一个成功的HTTP请求接收到的数据
五、如何将Response转换成Dart object?
虽然发出网络请求很简单,但如果要使用原始的Future<http.Response>并不简单。为了让我们更加方便地写代码,可用将http.Response转换成我们自己的Dart对象。
1、创建一个CommonModel类
首先需要创建一个CommonModel类,它包含我们网络请求的数据。它还将包括一个工厂构造函数,它允许我们可用通过json创建一个CommonModel对象。
2、将http.Response转换成一个CommonModel对象
现在,将更新fetchPost函数以后返回一个Future<Post>。为此,我们需要
①使用 dart:convert package 将响应内容转化为一个 json Map;
②使用fromJson工厂函数,将json Map转化为一个CommonModel对象
result实际上就是一个map
六、
请求并展示数据
七、代码
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() =>_MyAppState();
}
class _MyAppState extends State<MyApp>{
String showResult='';
Future<CommonModel> fetchPost() async{
final response= await http.get('http://www.devio.org/io/flutter_app/json/test_common_model.json');
final result=json.decode(response.body);
return CommonModel.fromJson(result);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Http')),
body: Column(
children: <Widget>[
InkWell(
onTap: (){
fetchPost().then((CommonModel value){
setState(() {
showResult='请求结果:\nhideAppBar:${value.hideAppBar}\nicon:${value.icon}';
});
});
},
child: Text('点我',style: TextStyle(fontSize: 26)),
),
Text(showResult)
],
),
),
);
}
}
class CommonModel{
final String icon;
final String title;
final String url;
final String statusBarColor;
final bool hideAppBar;
CommonModel({this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});
factory CommonModel.fromJson(Map<String,dynamic>json){
return CommonModel(
icon: json['icon'],
title: json['title'],
url: json['url'],
statusBarColor: json['statusBarColor'],
hideAppBar: json['hideAppBar'],
);
}
}
八、请求过程
1、首先从下面的网址获取请求数据
2、这个网址返回的是一个json数据
3、将json数据转化成一个map
4、调用CommonModel.fromJson()将Map类型数据转化成result
因为key是String类型的,但是值是dynamic动态类型的,所以需要将动态类型转化为实际类型,所以需要将动态类型转化为实际类型。这里根据key、value的方式构造工厂方法,这样就可以获取到从网络上返回的具体的数据
5、最终调用fetchPost(),返回CommonModel,而且它是Future类型的,泛型里面是CommonModel
6、
当点击屏幕的时候调用onTap()方法
onTap()方法里面调用fetchPost(),它返回Futrue<CommonModel>,可以通过调用Future<>的then()方法返回正确的值value,这个值就是泛型,也就是Model,然后就可以通过"."的方式来获取model里面的数据
通过setState()方法将结果设置到showResult上面
7、底部有一个Text,用来显示showResult