[Flutter ] Django 为资料库，以 FutureBuilder + http 抓取

Free fake API 为资料库，以 FutureBuilder + http 抓取
为Flutter 建立 Django 资料库

承上文章，此将 Flutter 去抓取本地服务器 Django 内的文章资料，并在模拟器内以 ListView 呈现。
Django:
开启 Django 资料库 runserver

python manage.py runserver 0.0.0.0:8000

Flutter:

1. AndroidManifest.xml file 加入下指令(无脑全开)

<manifest ...">
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

</manifest>

2. 到 main.dart 修改:

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> {

  // 输入资料网址 令 http 抓取资料
  final String host = "http://172.20.10.4:8000/notes/"; // 将前改为自己的 IP 位置

  Future getData() async {
    final response = await http.get(Uri.parse(host));
    Utf8Decoder utf8decoder = Utf8Decoder(); // 文章若有中文, 需以此修正乱码
    var result = jsonDecode(utf8decoder.convert(response.bodyBytes));
    print(result);
    return result;
  }

  @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) {
            List datas = (snapshot.data);
            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...');
            print(snapshot);
            return Container();
          }
        },
      ),
    );
  }
}

开启模拟器测试，android 和 chrome 都可正常运行

注:
虽然是在同一台电脑内开服务器并用模拟器去抓资料，但android模拟器似乎就视为区网内的另一主机，所以服务器必须开启 ALLOWED_HOSTS，android模拟器在由此进入资料库。
起初观念不清在这兜圈子，给需要的人做个借镜!小白自学，欢迎评论指导!