• 首先进行网络请求配置

Flutter网络请求配置.png

• 进入需要进行网络请求的界面导入 “import 'package:http/http.dart' as http;”

一般网络请求在initState里面发送、具体按需求再改 下面事例参考中发请求里面的Map转模型请回看Flutter (四)Map转模型

• 方法备注 下面是具体发送网络请求代码参考

1.initState() :初始化方法-只会调用一次
2.getDatas():发送网络请求的方法
3.Widget build(BuildContext context) :渲染界面的方法
4.Widget _buildItemForRow(BuildContext context, int index) : ListView 上返回Item的方法

  class _ChatPageState extends State<ChatPage> {
  bool _cancelConnect = false;//防止多次请求
  //初始化对象的时候只调用一次
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //.then是处理返回的数据
    getDatas().then((List<Chat> datas) {
      if(!_cancelConnect){
        //datas 就是返回的数据
        setState(() {
          _datas = datas;
        });
      }
    }).catchError((error) {
      print(error);
    }).whenComplete((){
      print('该请求完毕');
    }).timeout(Duration(seconds: 10)).catchError((timeout){//判断请求超时回调
      _cancelConnect = true;
      print('超时:${timeout}');
    });

  //Future 类似可选类型 表示接下来的值可能有值也可能有错误
  Future<List<Chat>> getDatas() async {//异步请求  注意:async和await 要成对出现
    _cancelConnect = false;//防止多次请求
    final response = await http.get('http://rap2api.taobao.org/app/mock/224518/api/chat/list');
    if(response.statusCode==200) {
      //获取相应数据,并且转换成Map类型
      final responseBody = json.decode(response.body);
      //转换模型数组
      List<Chat> chatList = responseBody['chat_list']
          .map<Chat>((item) => Chat.formJson(item))
          .toList();
      return chatList;//数据返回
    }else {
      throw Exception('statusCode:${response.statusCode}');//抛请求异常
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: WeChatThemeColor,
        centerTitle: true, //这个是解决安卓机型上导航标题居中显示
        title: Text('Flutter Demo'),
        actions: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 10),
            child: PopupMenuButton(
              offset: Offset(0, 60.0),
              child: Image(
                image: AssetImage('images/圆加.png'),
                width: 25,
              ),
              itemBuilder: _buildPopupMunuItem,
            ),
          ),
        ], //右侧加号按钮 要加手势点击
      ),
      body: Container(
        child: _datas.length == 0
            ? Center(
                child: Text('Loading...'),
              )
            : ListView.builder(
              itemCount: _datas.length,
              itemBuilder: _buildItemForRow,
          ),
      ),
    );
  }
}
//返回 ListView 上Item 的小部件
  Widget _buildItemForRow(BuildContext context, int index) {
    return ListTile(
      title: Text(_datas[index].name),
      subtitle: Container(
        height: 20,
        width: 20,
        child: Text(
          _datas[index].message,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(_datas[index].imageUrl),
      ),
    );
  }

壮士且慢, 需要Demo请继续关注,后面会一起上传！！！😊 赞一下再走

重磅：

至此：感谢简友的持续关注,决定提供一份完整Flutter项目，关注下面"技高易愁"公众号获取:【Flutter项目-微信】

请关注"技高易愁"微信公众号.jpg

QQ：522608370

😊 点下赞呗！！！

Flutter （二）布局
Flutter （三） 状态管理
Flutter （四） Map转模型
Flutter （五） 网络请求
Flutter （六） 保留界面状态
Flutter （七） 混合开发 [配置]
Flutter （八） 混合开发 [Flutter完整项目嵌入到原生]