Flutter进阶—网络和HTTP

使用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地址'),            )          ]        )      )    );  }}