Flutter-使用http请求数据并展示

关注 https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识

不能进行网络请求的APP不是一个真的APP，Flutter目前在网络请求上还没有非常可靠的开源库（没有令人满意的），暂时用http来实现一下简单的网络请求吧。

效果图

http_demo

数据模型

/// Model:图片列表响应
class ImageResponse {
  final int code;
  final String message;
  final List<Map<String, dynamic>> result;

  ImageResponse(this.code, this.message, this.result);

  factory ImageResponse.fromJson(Map<String, dynamic> json) => ImageResponse(
      json["code"],
      json["message"],
      List<Map<String, dynamic>>.from(json["result"]));
}

/// Model:图片数据
class ImageBean {
  final String img;
  final String publishedAt;

  ImageBean({this.img, this.publishedAt});

  factory ImageBean.fromJson(Map<String, String> json) {
    return ImageBean(img: json["img"], publishedAt: json["publishedAt"]);
  }
}

这里需要注意的是dynamic类型，不要随便强转，要不然会报错。这里为什么要进行手动解析？第一因为简单，第二是因为Flutter不支持反射，没法做到特别好的反序列化（json_serializable会生成代码，并不太让人满意，这里忽略）。

接口请求

import 'dart:convert';
import 'dart:io';

import 'package:http/http.dart';

const String HOST_DEMO = "https://api.apiopen.top";

const String defaultPage = "0";

const String defaultCount = "30";

/// 获取图片列表
Future<ImageResponse> fetchImages() async {
  return getImages().then((response) {
    return ImageResponse.fromJson(json.decode(response.body));
  }).catchError((error) {
    throw HttpException("statusCode: ${error.toString()}");
  });
}

Future<Response> getImages() => get("$HOST_DEMO/getImages",
    headers: {"page": defaultPage, "count": defaultCount});

需要注意的是json的转换，至于请求参数，可以自行构造一个map。

解析响应数据并展示

SafeArea(
          child: FutureBuilder<ImageResponse>(
        future: fetchImages(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
                padding: EdgeInsets.only(left: 10, right: 10, top: 6),
                itemCount: snapshot.data.result.length,
                itemBuilder: (context, index) {
                  final Map<String, dynamic> bean =
                      (snapshot.data.result)[index];
                  return Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(4)),
                    child: InkWell(
                      child: FadeInImage.assetNetwork(
                        image: bean["img"] ?? IMG_URL0,
                        placeholder: "images/loading.gif",
                      ),
                      onTap: () {
                        NavUtils.openWebView(context,
                            "https://github.com/jiangkang/flutter-system");
                      },
                    ),
                  );
                });
          } else if (snapshot.hasError) {
            return Center(child: Text("Error occurs! ${snapshot.error}"));
          }
          return Center(child: CircularProgressIndicator());
        },
      ))

这里会用到FutureBuilder来承载数据，然后简单的展示个图片列表。

完整代码

完整代码