[Flutter ] Free fake API 为资料库，以 FutureBuilder + http 抓取

程序版本: Flutter 2.2.1

使用JSONPlaceholder为 Free fake API 为资料库，将其导入官方 FutureBuilder class 范例作为测试，并改 ListView 为浏览大量资料。

JSONPlaceholder 资料内容:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
......

先在 pubspec.yaml 内加入 http，在此使用版本为 0.13.3。

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

官网说明需在 AndroidManifest.xml file 加入下指令，但进到档案看时指令已存在。

<uses-permission android:name="android.permission.INTERNET" />

到 main.dart 修改 FutureBuilder class 范例入下:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; // 导入 http.get 抓资料
import 'dart:convert'; // 导入 jsonDecode 解压资料

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  // 原例: 延迟 2 秒後传入 String 'Data Loaded'
  final Future<String> _calculation = Future<String>.delayed(
    const Duration(seconds: 2),
        () => 'Data Loaded',
  );

  // 输入资料网址 令 http 抓取资料
  final String host = 'https://jsonplaceholder.typicode.com/posts';
  getData() {
    return http.get(Uri.parse(host)); // http 0.13 後不能直接输入 string
  }

  @override
  Widget build(BuildContext context) {
    // 改为 Scaffold 输出
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder'),
      ),
      body: FutureBuilder(
        future: getData(), // 执行 http
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          // snapshot 抓资料，若优资料则:
          if (snapshot.hasData) {
            // jsonDecode 解压
            List datas = jsonDecode(snapshot.data.body);

            return ListView.builder(
                itemCount: datas.length,
                itemBuilder: (context, idx) {
                  var data = datas[idx];
                  return ListTile(
                    title: Text(data['title']),
                    subtitle: Text(data['body']),
                  );
                });
          } else if (snapshot.hasError) {
            print('Error: ${snapshot.error}');
            return Container(); // 失败回传空资料
          } else {
            print('Awaiting result...');
            return Container();
          }
        },
      ),
    );
  }
}