Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

Flutter进阶—网络和HTTP

$
0
0

使用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地址'),
            )
          ]
        )
      )
    );
  }
}
作者:hekaiyou 发表于2017/6/5 12:11:18 原文链接
阅读:168 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>