二、Flutter网络请求数据

目录
一、集成dio
二、ListView
三、请求网络数据
四、刷新ListView
五、flutter run

一、集成dio

dio: ^2.1.10是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器。
pubspec.yaml 中 添加dio: ^2.1.10，并同步 packages get。
在相应的 .dart 文件中添加引用 import 'package:dio/dio.dart'。

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  dio: ^2.1.10

二、ListView

ListView是最常用的滑动组件。它在滚动方向上一个接一个地显示它的孩子。在交叉轴中，需要孩子填充ListView。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('网络请求数据'),
      ),
      body: Center(
          child: ListView.builder(
              itemCount: listData == null ? 0 : listData.length,
              itemBuilder: this._getItems)),
    );
  }

三、请求网络数据

进入页面时系统会自动调用 initState()，为了保证第一次正常加载，这个时候调用_loadData()；

void _loadData() async {
    var result = await YFHttp.request('/v2/movie/in_theaters',
        data: {
          'apikey': "0b2bdeda43b5688921839c8ecb20399b",
        },
        method: YFHttp.GET);
  }

四、刷新ListView

网络请求是异步的造成数据不能同步到ListView,这个时候就需要刷新表格，把网络数据加载到ListView里面。

  setState(() {
      listData = result['subjects'];
    });

五、flutter run

终于一切都准备好了，只差flutter run。

网络请求数据.jpg 关注公众号，查看更多内容.jpg