Flutter 结合 Dio 使用

原创

Jimmy_Pang 2022-08-09 20:58:40 ©著作权

文章标签 Flutter iOS 前端 flutter 数据 文章分类 开源

©著作权归作者所有：来自51CTO博客作者Jimmy_Pang的原创作品，请联系作者获取转载授权，否则将追究法律责任

上一篇文章 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 结合 Dio 使用_Flutter

那么我们来验证下在 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 的调试控制台中，你会看到下面的返回：

Flutter 结合 Dio 使用_数据_02

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

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);
    }
  }
}