flutter网络请求框架Dio简单使用

问题背景

在Flutter中,目前比较流行的网络请求框架是Dio,是Flutter中文网推出的。本文主要是讲解如何简单使用Dio的get请求来获取数据,并使用Flutter中的listview进行展示。

问题分析

(1)添加对应依赖 在pubspec.yaml文件中的dependencies标签下面写即可，代码如下：

environment:
  sdk: ">=2.10.0 <3.0.0"

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: ^1.0.4
  flutter_swiper: 1.1.6
  ......
  # 增加dio依赖框架
  dio: ^5.1.1

(2)get获取网络请求数据 这我们使用简单的get请求方式来获取数据,接口的话我们使用郭霖提供的API接口http://guolin.tech/api/china,我们可以使用浏览器直接访问,来看看获取的数据,如下图所示： (3)实体类创建 这里推荐使用个插件JsonToDart，插件市场直接安装即可，如图所示： 安装好插件后,我们要使用的话,可以右键,然后悬着具体菜单即可新建即可,这里我是建了个model文件夹,右键model文件夹, New -> Json To Dart 把json字符串输入进去,输入类名,之后点击Generate即可生成一个dart的实体类文件。

问题解决

上节初步分析了基本环节，本节直接上代码。 (1)新建的json对应的dart实体类代码如下：

class CityModel {
  CityModel({
      this.id, 
      this.name,});

  CityModel.fromJson(dynamic json) {
    id = json['id'];
    name = json['name'];
  }
  int id;
  String name;

  Map<String, dynamic> toJson() {
    final map = <String, dynamic>{};
    map['id'] = id;
    map['name'] = name;
    return map;
  }

}

(2)界面文件代码如下：

import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

import 'model/CityModel.dart';

class Test extends StatefulWidget {
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List list = [];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('list page'),
        ),
        body: _listView(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }

  @override
  void initState() {
    getCityData();
  }

  void getCityData() async {
    var dio = Dio();
    Response response = await dio.get('http://guolin.tech/api/china',
        options: Options(responseType: ResponseType.plain));
    var list = jsonDecode(response.data);

    var cityList =
    list.map((m) => new CityModel.fromJson(m)).toList();
    setState(() {
      this.list.addAll(cityList);
    });
  }

  /// 列表组件
  Widget _listView() {
    return new ListView.builder(
      // listview的子项item数量
      itemCount: list.length,
      // 内边距
      padding: new EdgeInsets.all(5.0),
      itemBuilder: (BuildContext context, int index) {
        // 返回每个子项item的widget
        // 城市名
        return _listItemView(list[index].name);
      },
    );
  }

  /// 定义列表的每个item布局
  Widget _listItemView(String name) {
    return Row(
      children: [
        Center(
          child: Text(name),
        ),
      ],
    );
  }
}

(3)运行结果如下：

问题总结

本文初步讲解如何简单使用Dio的get请求来获取数据,并使用Flutter中的listview进行展示，有兴趣的同学可以进一步深入研究。