Flutter 结合 Dio 使用

持续创造，加速成长！这是我参加「日新方案 6 月更文挑战」的第2天，点击查看活动概况

上一篇文章 Flutter 布局备忘录 — 多图警告，干货主张保藏 中，咱们基本了解了 Flutter 相关的布局。那么，咱们怎么拿到数据，然后填充到部件中呢？

这儿咱们运用 Dio 来进行接口的恳求。

学过前端的读者应该不生疏，在 package.json 中有下面两种办法引进包：

"dependencies": {
  "@angular/animations": "9.1.11",
},
"devDependencies": {
  "tslint": "~6.1.2",
}

dependencies 下的包是要发布到出产环境，而 devDependencies 下的包只用于开发环境。

在 flutter 中，pubspec.yaml 也对应着这两个环境，如下：

dependencies:
  flutter:
    sdk: flutter
dev_dependencies:
  flutter_test:
    sdk: flutter

这儿默认你已经创立一个 Flutter 项目，如果还不清楚如何创立，能够查阅本文 Flutter 系列 – 开始你的第一个应用。

因为咱们出产环境仍是要用到 Dio，所以咱们需要在 dependencies 下添加包：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.6

截止发文，Dio 的最新版本为 ^4.0.6

运转 flutter pub get 拉取相关的依赖。如果装置不成功，可尝试另一种装置办法，运转 flutter pub add dio。

这儿我运用个人站点的接口 获取文章的接口数据 来调试，你能够复制其接口到浏览器中查看，回来的数据如下图所示：

那么咱们来验证下在 Flutter 中能否恳求到。

咱们引进 import 'package:dio/dio.dart' 包后，建议一个恳求：

void getArticles() async {
  try {
    Response response;
    response = await Dio().get(
      'https://jimmyarea.com/api/public/article',
      queryParameters: {"page": -1},
    );
    print(response);
  } catch (e) {
    print(e);
  }
}

调用 getArticles()，保存页面之后，在 VSCode 的调试操控台中，你会看到下面的回来：

还不错是吧，现在咱们来回填下获取内容，更改代码如下：

List<Widget> articleWidgets = [];
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    getArticles().then((value) {
      List<Widget> temp = [];
      value['data']['results'].forEach((item) {
        temp.add(Text(item['title']));
      });
      setState(() {
        articleWidgets = temp;
      });
    });
    // 相关的布局
    return Material(
      color: Colors.blue,
      child: SafeArea(
        child: SizedBox.expand(
          child: Card(
            color: Colors.yellowAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: articleWidgets,
            ),
          ),
        ),
      ),
    );
  }
  // 获取文章数据
  Future getArticles() async {
    try {
      Response response;
      response = await Dio().get(
        'https://jimmyarea.com/api/public/article',
        queryParameters: {"page": -1},
      );
      return response.data;
    } catch (e) {
      return print(e);
    }
  }
}

上面代码中，咱们先通过 getArticles() 函数回来一个类似 promise 的数据，然后在 then 函数中通过 setState 来更新获取的部件，然后渲染到页面。iOS 模拟器上截图如下：

iOS 真机效果图如下：

对于 iOS 真机上的效果，读者能够移步文章 Flutter iOS 真机测验 — 值得保藏。

Not Bad. 读者能够自行跑起来验证。