Flutter网络请求json数据，Listview显示

本次网络请求采用 Http 请求，需要在 pubspec.yaml 中添加依赖，添加下面第二行代码。

dependencies:
  http: ^0.11.0	//添加这行
  flutter:
    sdk: flutter

由于请求的是 json 数据，为了能够将 json 数据映射为对象，首先需要定义实体类，下面为定义的实体类。

//数据类，将json数据封装为对象
class ListData {
  final String userName;
  final String avatarUrl;
  ListData(this.userName, this.avatarUrl);
}

下面是网络请求和 json 解析的代码。

  List<ListData> _list = [];

  //异步加载数据
  _loadData() async {
    //下面为具体网址，需要自己修改
    String url = "http://00.000.000.000:8080/yiqijiu/GetHelpInfo";
    http.Response response = await http.get(url);
    setState(() {
      final data = jsonDecode(response.body);
      for (var _data in data) {
      	//双引号中的内容需要和 json 数据中的键值对应
        _list.add(ListData(_data["patientName"],_data["patientPortrait"]));
      }
    });
  }

本次我们会将取得的数据显示在 Listview 中，完整代码如下。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: ListviewHttp(),
    );
  }
}

class ListviewHttp extends StatefulWidget {
  @override
  ListviewHttpState createState() {
    return new ListviewHttpState();
  }
}

class ListviewHttpState extends State<ListviewHttp> {
  List<ListData> _list = [];

  //异步加载数据
  _loadData() async {
    String url = "http://00.000.000.000:8080/yiqijiu/GetHelpInfo";
    http.Response response = await http.get(url);
    setState(() {
      final data = jsonDecode(response.body);
      for (var _data in data) {
        _list.add(ListData(_data["patientName"],_data["patientPortrait"]));
      }
    });
  }

  //构造listtile
  Widget _buildRow(int index) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: ListTile(
        title: Text(_list[index].userName),
        leading: CircleAvatar(
          backgroundImage: NetworkImage(_list[index].avatarUrl),
        ),
      ),
    );
  }

  //初始化状态
  @override
  void initState() {
    super.initState();
    _loadData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Listview Http Test"),
      ),
      body: ListView.separated(
        itemCount: _list.length,
        itemBuilder: (BuildContext context, int index) => _buildRow(index),
        //子项的分割线
        separatorBuilder: (BuildContext context,int index) => Divider(),
      ),
    );
  }
}

//数据类，将json数据转换为对象
class ListData {
  final String userName;
  final String avatarUrl;
  ListData(this.userName, this.avatarUrl);
}

效果图如下，成功加载用户头像和昵称。