Flutter 网络请求及示例

1、Flutter Dio请求数据
dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、
文件上传/下载、超时、自定义适配器等
官网：
https://pub.dev/packages/dio
中文文档：
https://github.com/flutterchina/dio/blob/master/README-ZH.md
Dio的配置
dependencies:
dio: ^4.0.6
import 'package:dio/dio.dart';

class _NewsPagerState extends State<NewsPager> {
  List list = [];
  @override
  void initState() {
    super.initState();
    getData();
  }

  getData() async {
    //get  post  put delete请求
    var result = await Dio().get("https://jdmall.itying.com/api/pcate",
        queryParameters: {"userName": "张三"});
    // var result2 = await Dio().post('https://jdmall.itying.com/api/httpPost',
    //     data: {"username": "张三111", "age": "20"});
    // var result3 = await Dio().put('https://jdmall.itying.com/api/httpPut',
    //     data: {"username": "张三111", "age": "20"});
    // var result4 = await Dio().delete('https://jdmall.itying.com/api/httpDelete',
    //     queryParameters: {"id": "1"});
    setState(() {
      list = result.data["result"];
    });
  }

  @override
  Widget build(BuildContext context) {
    return list.isNotEmpty
        ? ListView(
            children: List.generate(list.length, (index) {
              return ListTile(
                title: Text(list[index]["title"]),
              );
            }).toList(),
          )
        : const Center(
            child: CircularProgressIndicator(),
          );
  }
}

FutureBuilder第二种写法

class _NewsPagerState extends State<NewsPager> {
  List list = [];
  @override
  void initState() {
    super.initState();
    getData();
  }

  getData() async {
    var result = await Dio().get("https://jdmall.itying.com/api/pcate",
        queryParameters: {"userName": "张三"});
    return result.data["result"];
    ;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Center(child: Text("Error:${snapshot.error}"));
          } else {
            var response = snapshot.data as List;
            return ListView(
              children: response.map((value) {
                return ListTile(
                  title: Text(value["title"]),
                );
              }).toList(),
            );
          }
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}

2、Flutter下拉刷新 上拉分页加载更多
在Flutter官方sdk中给我们提供了下拉刷新的组件RefreshIndicator。但是没有提供上拉分页加载更多
的组件。但是在Flutter ListView中有一个ScrollController属性，它就是专门来控制ListView滑动事件，
在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。

class _NewsPagerState extends State<NewsPager> {
  List list = [];
  int page = 1;
  bool haveData = true; //是否还有数据
  bool flag = true;
  ScrollController controller = ScrollController();
  @override
  void initState() {
    super.initState();
    controller.addListener(
      () {
        if (controller.position.pixels >
            controller.position.maxScrollExtent - 30) {
          getData();
        }
      },
    );
    getData();
  }

  getData() async {
    if (flag && haveData) {
      flag = false;
      String apiUri =
          "https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=$page";
      var response = await Dio().get(apiUri);
      var result = json.decode(response.data)["result"];
      setState(() {
        list.addAll(result);
        page++;
        flag = true;
      });
      if (result.length < 20) {
        haveData = false;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return list.isNotEmpty
        ? RefreshIndicator(
            child: ListView.builder(
                itemCount: list.length,
                controller: controller,
                itemBuilder: (context, index) {
                  if (index == list.length - 1) {
                    return Column(
                      children: [
                        ListTile(
                          title: Text(list[index]["title"]),
                        ),
                        progressIndicator(),
                      ],
                    );
                  } else {
                    return ListTile(
                      title: Text(list[index]["title"]),
                    );
                  }
                }),
            onRefresh: () async {
              await getData();
            })
        : progressIndicator();
  }

  Widget progressIndicator() {
    if (!haveData) {
      return const Center(
        child: Text("我是底部"),
      );
    } else {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
  }
}

3、flutter_html 解析html

child: Html(
                    data: list[0]["content"],
                    style: {
                      "body": Style(backgroundColor: Colors.white),
                      "p": Style(fontSize: FontSize.large),
                    },
                    onLinkTap: (url, attributes, element) {},
                  ),