flutter学习六：实现http网络请求

昨晚学习了flutter实现http网络请求的get方法，后面学习到post等其它方法再补充。为了效果，我在eolinker上面建立了一个get接口，不知道这个虚拟url你们能不能使用，先看效果图：

     

                                                 

 

一. get的请求

1. 引入http包：

 

 

 2. 模型的创建

2.1 创建bean，就是用于接收服务器返回的模型：

 

2.2 当模型比较复杂时，代码慢慢打就不太好了，可以直接用json转成dart代码模型：

json在线转换成dart（适用于json转成模型）：https://javiercbk.github.io/json_to_dart/ 

 

3.  进行网络请求（其实跟java里面的网络请求差不多，不过还需要进一步封装才行），为了看网络请求效果，需要提前准备一个url,且里面返回的数据要跟定义好的BaseBean对应上。

3.1官网的请求方式

  var _ipAddress = 'Unknown';

  //官网的请求方法
  Future<BaseBean> _getHttpData() async {
    var url =
        'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test';
    var httpClient = new HttpClient();
    String result;
    try {
      var request = await httpClient.getUrl(Uri.parse(url));
      var response = await request.close();
      if (response.statusCode == HttpStatus.ok) {
        var json = await response.transform(utf8.decoder).join();
        var data = jsonDecode(json); //此时的data就是服务器返回的一整条json
        result = data['msg']; //获取里面的msg
      } else {
        result =
            'Error getting IP address:\nHttp status ${response.statusCode}';
      }
    } catch (exception) {
      result = 'Failed getting IP address';
    }
    if (!mounted) return null;
    setState(() {
      _ipAddress = result;
    });
  }

3.2 另一种方法

  //另一种请求方法
  Future<BaseBean> getData() async {
    final response = await http.get(
        'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test');
    final result = json.decode(response.body);

    return BaseBean.from(result);
  }

 

3.3 完整代码

注：因为截图时忘记把“侧滑菜单”给注释掉了，所以代码就附上了。

import 'dart:convert';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/bean/BaseBean.dart';
import 'package:http/http.dart' as http;

//舞蹈
class DancePage extends StatefulWidget {
  _DancePageDtate createState() => _DancePageDtate();
}

class _DancePageDtate extends State<DancePage> {
  //显示返回的数据
  String showResult = '';

  //另一种请求方法
  Future<BaseBean> getData() async {
    final response = await http.get(
        'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test');
    final result = json.decode(response.body);

    return BaseBean.from(result);
  }

  var _ipAddress = 'Unknown';

  //官网的请求方法
  Future<BaseBean> _getHttpData() async {
    var url =
        'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test';
    var httpClient = new HttpClient();
    String result;
    try {
      var request = await httpClient.getUrl(Uri.parse(url));
      var response = await request.close();
      if (response.statusCode == HttpStatus.ok) {
        var json = await response.transform(utf8.decoder).join();
        var data = jsonDecode(json); //此时的data就是服务器返回的一整条json
        result = data['msg']; //获取里面的msg
      } else {
        result =
            'Error getting IP address:\nHttp status ${response.statusCode}';
      }
    } catch (exception) {
      result = 'Failed getting IP address';
    }
    if (!mounted) return null;
    setState(() {
      _ipAddress = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('舞蹈',
            style: new TextStyle(color: Colors.white, fontSize: 26)),
      ),
      body: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 15),
            height: 50,
            child: new RaisedButton(
                color: Colors.red,
                child: new Text(
                  '另一种HTTPS的Get请求',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                onPressed: () {
                  //按下时发起请求
                  getData().then((BaseBean value) {
                    //重置状态
                    setState(() {
                      showResult = '请求结果：\nstatus:${value.status} '
                          '\n msg:${value.msg} '
                          '\ndata:${value.data} } ';
                    });
                  });
                }),
          ),
          Container(
            margin: EdgeInsets.only(top: 15),
            height: 50,
            child: new RaisedButton(
              color: Colors.red,
              child: new Text(
                '官网HTTPS的Get请求',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
              onPressed: _getHttpData,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            decoration: BoxDecoration(color: Colors.black),
            child: Text(
              showResult,
              style: TextStyle(color: Colors.white, fontSize: 26),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 15),
            alignment: Alignment.center,
            decoration: BoxDecoration(color: Colors.black),
            child: Text(
              _ipAddress,
              style: TextStyle(color: Colors.white, fontSize: 26),
            ),
          ),
        ],
      ),
      //这个是侧边栏菜单，忽略
      drawer: Drawer(
        elevation: 500,
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text(
                '侧滑标题栏',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
              decoration: BoxDecoration(color: Colors.black), //头部装饰
            ),
            ListTile(
              title: Text(
                '哎呀妈妈呀',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            Divider(), //分割线
            ListTile(
              title: Text(
                '沙哈黧黑',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            Divider(), //分割线
            ListTile(
              title: Text(
                '啥我滴卡',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            Divider(), //分割线
          ],
        ),
      ),
    );
  }
}

 

后续会继续补充其它请求以及优化的，先到这里了！ 

 

上一篇： flutter学习五：实现轮播图Swiper、GridView布局及点击事件 

下一篇： flutter学习七：顶部导航栏TabBar切换子布局FutureBuilder、shared_preferences、ExpansionTile、RefreshIndicat