Flutter读取MySQL数据渲染ListView时出现null安全相关错误如何解决？

算力阿峰

2026-9-30

错误原因

两个报错均由Dart空安全机制、类型推断缺失、JSON数据未解析三个问题共同导致：

第一个报错：即便判断了snapshot.hasData，Dart编译器仍无法默认snapshot.data为非空值，直接访问length属性触发空安全校验报错。
第二个报错：一是未给FutureBuilder指定泛型，snapshot.data默认被推断为Object?类型无法直接赋值给List；二是你当前的getData方法直接返回了字符串格式的接口响应，没有转成List类型的结构化数据。

修复方案

步骤1：启用JSON解析依赖

取消代码中dart:convert导入语句的注释：

import 'dart:convert';

步骤2：修改getData方法，指定返回类型并解析JSON

Future<List<dynamic>> getData() async{
  var url = 'http://192.168.8.188/ziga/CRUD flat/index.php';
  final response = await http.get(Uri.parse(url));
  // 将字符串响应解析为List格式的JSON数据
  return jsonDecode(response.body);
}

步骤3：修改FutureBuilder代码，补全泛型与非空声明

body: FutureBuilder<List<dynamic>>(
  future: getData(),
  builder: (context,snapshot){
    if(snapshot.hasError) {
      print(snapshot.error);
    }
    if (snapshot.hasData) {
      // 用!操作符明确告知编译器当前data非空，直接提取List复用
      final list = snapshot.data!;
      return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context,index) {
          return ListTile(
            title: Text(list[index]['Name']),
          );
        }
      );
    } else {
      return const Center(child: CircularProgressIndicator());
    }
  }
),