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

(2)get获取网络请求数据 这我们使用简单的get请求方式来获取数据,接口的话我们使用郭霖提供的API接口http://guolin.tech/api/china,我们可以使用浏览器直接访问,来看看获取的数据,如下图所示： image.png (3)实体类创建 这里推荐使用个插件JsonToDart，插件市场直接安装即可，如图所示： image.png 安装好插件后,我们要使用的话,可以右键,然后悬着具体菜单即可新建即可,这里我是建了个model文件夹,右键model文件夹, New -> Json To Dart image.png 把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 = [];@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('list page'),),body: _listView(),),theme: ThemeData(primarySwatch: Colors.yellow,),);}@overridevoid 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)运行结果如下： image.png

问题总结

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