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);
}

效果圖如下，成功加載用戶頭像和暱稱。