如何解决Flutter发起HTTP请求时出现type 'String' is not a subtype of type 'int' of 'index'错误

你遇到的报错type 'String' is not a subtype of type 'int' of 'index'核心原因是：
你请求的接口返回的JSON结构是数组类型，但你代码里直接对解码后的结果使用了字符串键['id']取值，数组的索引必须为int类型，类型不匹配直接触发异常。
你Postman返回的结果外层是[]包裹的数组，不是{}包裹的对象，所以jsonDecode(data)返回的是List类型，不是Map类型，不能直接用字符串键取值。

1. 新增一个List类型的变量存储接口返回的处方列表，避免反复解码JSON
2. 修正解码后的取值逻辑，直接获取列表长度赋值给itemCount
3. 优化重复解码的性能问题，同时兼容新版http包要求的Uri类型传参规则

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

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

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 存储处方列表，不用存原始字符串和单独的长度变量
  List prescriptionList = [];

  @override
  void initState() {
    super.initState();
    getData();
  }

  void getData() async {
    int id = 1;
    var token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiODU2NDE3YTYwMTFjODFiNTQxYzkzOGY5YWFhNGU1OTY0MzYwYThmZGFiOGMwMGFmMGUwNzIxMTM2MTE5YmY5YjQwZjMyZGFkNjQ4YzdhOTIiLCJpYXQiOjE2MzEzNTQzNDguMDYxOTI5LCJuYmYiOjE2MzEzNTQzNDguMDYxOTM5LCJleHAiOjE2NjI4OTAzNDcuNjk0MDc0LCJzdWIiOiIyIiwic2NvcGVzIjpbXX0.JoGlxB2Htg3t3Fjpmtw6oKnuGXktN4n3g3xWa1Eh0U_TgKKCQv9OB04vaqkcaPo66EYvP89gxKuIIhuGJiEAXdTj0X_ScdNWwvB8Dki_CLQu7_MUyOXakxjz5jSe2xB-xnIB3-y8xc8rOkWZTf6QcPZm1eXUNGWelemvTafIzNm-YeGmpwBaXN2E04QUJ2EYBLu13h7T53rFG3wDBa2j10RS_FWtBlUxgYF5y-3aZNypIzdNI8dqFXuZl_0Crz4MHHFVgchFixJK_txoG2S08jqBCoaUuArFlxqVVL-wcMci6MITPCbiib-_2J4jydqwKgnxzGBqzX6hj0RXdT-BqolvsV5ZGX5sY8ANZR9AvGaJ3SQWbcNv5wVT_DlTqMSfjNwtaOYOocH_LTFNmhjQyTW8TqbiyJHuYbtKRDcwJ2X4kSK-IvA7nyn8xefcempuFYO9M6BD00E-WoiaKwEbxJa3iQsiHgcNziPI-3Lq7S-9CDNHYYiDrgyIrwRhcFuIklmFrsGl8tb08hReNLInlVcy_eAjYifjlJvJYYXdozuhAobcVxkR6z1Xn_N2Vta7OYMWdG4kCYCfR1uF6pypxvlxxoYcwO2Q3Aj3sVPdz03B8gYvmrx-F55qbXwfXdtT3LWUj_ziJOG53GLdDy8DsmKx0c1vDjuLpRz_EPhTYEQ';

    String url = 'https://app.pyramidpharmacy.com/api/get-prescriptions-by-user-id';

    http.Response response = await http.get(
        Uri.parse(url + '/' + id.toString()),
        headers: {
          "Accept": "application/json",
          "Content-type": "application/json",
          HttpHeaders.authorizationHeader: 'Bearer $token'
        }
    );

    if (response.statusCode == 200) {
      setState(() {
        // 直接解码为列表存储
        prescriptionList = jsonDecode(response.body);
      });
      // 测试取第二个元素的截图路径
      print(prescriptionList[1]['screen_shot_path']);
    } else {
      print(response.statusCode);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Prescription List"),
        backgroundColor: Colors.green,
      ),
      body: ListView.builder(
        itemCount: prescriptionList.length,
        itemBuilder: (BuildContext context, int index) {
          var item = prescriptionList[index];
          return Card(
            child: ListTile(
              leading: Image.network(
                item['screen_shot_path'],
                fit: BoxFit.fill,
                width: 100,
                height: 500,
                alignment: Alignment.center,
              ),
              title: Text(item['title']),
              subtitle: Text(item['created_at']),
            ),
          );
        },
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者jonah rimsy