Flutter入门（4）网络请求

 

 准备写了好几天，又墨迹了几天。终于一边百度一边查资料写完了。 

网络请求使用的是玩安卓的api。https://www.wanandroid.com/blog/show/2

写网络请求我用的是第三方库dio，也是Flutter中文网开发的一个开源网络请求库，GitHub地址。需要了网络请求还要json

解析 json_serializable，在 pubspec.yaml 文件中导入依赖，（注意一定要格式对应）。

  dio: ^2.1.0
  json_annotation: ^1.2.0

  build_runner: ^0.10.2
  json_serializable: ^1.5.1

  

如果格式没有问题的话，然后点击右上角packages get 就可以了。

在android中使用retrofit中又一个ApiService 用来具体请求的，还有构建一个网络请求的工具类。

我们先写好网络请求的工具类 HttpUtil。

import 'package:cookie_jar/cookie_jar.dart';
import 'package:dio/dio.dart';

class HttpUtil {
  static const BASE_URL = 'https://www.wanandroid.com/';

  factory HttpUtil() => instance;
  static final HttpUtil instance = HttpUtil._internal();
  Dio dio;

  HttpUtil._internal() {
    if (dio == null) {
      BaseOptions options = BaseOptions();
      options.baseUrl = BASE_URL; //baseurl
      options.receiveTimeout = 1000 * 8; // 8 秒
      options.connectTimeout = 1000 * 6; // 6 秒  连接超时时间
      dio = Dio(options);
    }
  }

  ///-GET请求 parms为可选请求参数
  Future get(String path, [Map parms]) async {
    if (parms != null) {
      var response = await dio.get(path, queryParameters: parms);
      return response;
    } else {
      var response = await dio.get(path);
      return response;
    }
  }

  ///-POST请求，parms为可选请求参数
  Future post(String path, [Map parms]) async {
    if (parms != null) {
      var response = await dio.post(path, queryParameters: parms);
      return response;
    } else {
      var response = await dio.post(path);
      return response;
    }
  }
}

网络请求工具类里面简单封装了get 与 post请求。下面我们在生成json，在android 中又jsonFomat，flutter中也有对应的插件，一键生成bean类。安装插件，我已经安装过了，你只要点红色箭头的地方搜索这个，然后安装完毕重启就可以了。

右键生成json。wananroid api：https://www.wanandroid.com/article/list/0/json 

 

然后写ApiService 具体的网络请求。

import 'package:flutter_app/bean/project_content_entity.dart';
import 'package:flutter_app/http/HttpUtils.dart';
class ApiService {

  /// 首页文章列表 https://www.wanandroid.com/article/list/0/json
  static const PROJECT_CONTENT_LIST = 'article/list/';

  ///获取首页文章列表 [page]页数
  static Future getProjectContentData(int page) async {
    try {
      var response = await HttpUtil().get('$PROJECT_CONTENT_LIST$page/json');
      return ProjectContentEntity.fromJson(response.data);
    } catch (e, s) {
      print('TAG$s');
      return null;
    }
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_app/http/ApiService.dart';
import 'package:flutter_app/bean/project_content_entity.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State createState() {
    return new MyAppState();
  }
}

class MyAppState extends State {
  List _chapterList = [];
  int page = 0;

  @override
  void initState() {
    super.initState();
    _loadChapterData(); //初始化数据
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("flutter网络请求"),
          centerTitle: true,
        ),
        body: new ListView.builder( //返回一个listView列表
            itemCount: _chapterList.length, //item长度
            itemBuilder: (context, index) {
              return _itemChapter(index);
            }),
      ),
    );
  }

  _loadChapterData() {
    //网络请求更新数据
    ApiService.getProjectContentData(page).then((list) {
      setState(() {
        _chapterList.addAll(list.data.datas);
      });
    });
  }

  Widget _itemChapter(int index) {
    var projectData = _chapterList[index];
    return InkWell( //InkWell 是个点击效果
      child: Card( // 卡片布局
          margin: EdgeInsets.all(6.0), //偏移
          child: Column( //相当于垂直布局
            crossAxisAlignment: CrossAxisAlignment.start,// 开始位置
            children: [
              Padding(
                padding: EdgeInsets.all(8.0), //所有的偏移8
                child: Text(projectData.title,
                    style: TextStyle(fontSize: 16.0, color: Colors.black)),
              ),
              Padding(
                  padding: EdgeInsets.fromLTRB(8.0, 1.0, 8.0, 1.0), //
                  child: Text(
                    '${(projectData.superChapterName)}/${(projectData.chapterName)}',
                    style: TextStyle(fontSize: 13.0, color: Colors.blue[300]),
                  )),
              Padding(
                padding: EdgeInsets.all(8),
                child: Row( //水平布局
                  children: [
                    Icon(
                      Icons.person,
                      color: Colors.grey,
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(5, 0, 0, 0),
                      child: Text(
                        projectData.author,
                        style: TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                    Expanded( //填充 Row、Column、Flex会被Expanded撑开，充满主轴可用空间
                      flex: 1,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end, //相当于的grivate.end
                        children: [
                          Icon(
                            Icons.timer,
                            color: Colors.grey,
                          ),
                          Text(projectData.niceDate,
                              style:
                                  TextStyle(fontSize: 12, color: Colors.grey))
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          )),
    );
  }
}

 下一篇是这个item解析的，他的布局是怎么样的。

  Flutter入门（5）Item布局解析