Flutter 数据获取 网络

该文章翻译自:Fetch data from the internet

概述

从网络中获取数据一般需要以下几个步骤:

  1. 添加网络请求库,可以在如下的http包中选择

  2. 使用添加的http包发起网络请求

  3. 将网络请求转换为常规的Dart对象

  4. 显示数据

详情

添加http网络请求库

http库提供了简单的方式从网络获取数据 为了添加库到项目中,需要在项目根目录的pubspec.yaml中添加依赖说明

dependencies:
  http: <latest_version>

然后执行

pub get

发起请求

在如下的实例中使用http.get方法从jsonplaceholder获取数据

Future<http.Response>fetchPost(){
    return http.get('https://jsonplaceholder.typicode.com/posts/1');
}

http返回的是一个Future,其包含一个Response

转换

尽管获取数据非常简单,但是获取到的数据却不能直接使用,因此我们需要将其装换成Dart对象

创建Post

首先我们需要创建一个Post类,用来作为通过网络请求获取到的数据的载体,该类包含一个特殊的初始化方法用来从json数据中创建Post对象实例

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
      return new Post(
        userId: json['userId'],
        id: json['id'],
        title: json['title'],
        body: json['body']);
      );
  }
}
http.Response转换为Post
Future<Post> fetchPost()async {
  final response =
      await http.get("https://jsonplaceholder.typicode.com/posts/1");

  final responseJson = json.decode(response.body);
  return new Post.fromJson(responseJson);
}

在这里我们修改fetchPost方法,将其返回值由http.Response变成Post

显示数据

为了显示数据到屏幕上,我们可以使用FutureBuilder组件,该组件与Future以及异步数据能够非常好的工作

该组件需要两个参数 1. Future参数,我们将使用上面的fetchPost方法

  1. Builder 函数如何显示获取到的数据
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: FutureBuilder(
        future: fetchPost(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return new Text(snapshot.data.title);
          } else if (snapshot.hasError) {
            return new Text("${snapshot.error}");
          }
          return new CircularProgressIndicator();
        },
      ),
    );

扩展