使用http包
Flutter支持http包,版本0.11.3+12或更高版本,首先在pubspec.yaml
中声明对http的依赖,注意添加声明后按顶部的“Packages get”:
dependencies:
flutter:
sdk: flutter
http: '>=0.11.3+12'
发出HTTP请求
接下来,创建一个HTTP客户端(Client),我们建议使用createHttpClient来启用测试以提供http.MockClient
:
import 'package:flutter/services.dart';
var httpClient = createHttpClient();
客户端支持常见的HTTP操作,比如:
HTTP GET:使用
get
获取一般的请求,read
返回字符串的请求或返回字节的请求的readbytes
。HTTP POST:使用
post
作为一般的的post。
演示代码:
postData() async {
...
var response = await httpClient.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
}
需要注意的是,HTTP API在返回值中使用Dart Futures,我们建议您使用具有async/await
语法的API调用,比如上面的演示代码。
解码和编码JSON
支持解码和编码JSON的功能由dart:convert
库提供,解码JSON字符串并将响应解析为Map:
Map data = JSON.decode(response.body);
/*
假设响应内容是这样的:['foo', { 'bar': 499 }]
barValue设置为499
*/
int barValue = data[1]['bar'];
要对JSON进行编码,要将一个简单的值(字符串,布尔值或数字文字)或Map、List或包含简单值的Map列表传递给encode
方法:
String encodedString = JSON.encode([1, 2, { 'a': null }]);
演示实例
这个实例演示了如何在Flutter应用程序中从HTTPS GET调用中解码JSON,它调用httpbin.com
的Web服务测试API,然后响应您的本地IP地址。请注意,使用安全网络(HTTPS)。
首先添加http依赖关系,然后再将lib/main.dart的内容替换为以下内容:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _ipAddress = "未知";
_getIPAddress() async {
String url = 'https://httpbin.org/ip';
var httpClient = createHttpClient();
var response = await httpClient.read(url);
Map data = JSON.decode(response);
String ip = data['origin'];
/*
bool mounted
这个状态对象当前是否在树中。
用于此处,如果控件在数据正在请求时从树中删除,则我们要丢弃该数据,而不是调用setState来更新实际不存在的内容。
*/
if(!mounted) return;
setState((){
_ipAddress = ip;
});
}
@override
Widget build(BuildContext context) {
var spacer = new SizedBox(height: 32.0);
return new Scaffold(
body: new Center(
child: new Column(
children: <Widget> [
spacer,
new Text('您当前的IP地址是:'),
new Text('$_ipAddress'),
spacer,
new RaisedButton(
onPressed: _getIPAddress,
child: new Text('获取IP地址'),
)
]
)
)
);
}
}