Flutter调用自定义API取列表时报LateInitializationError如何解决？

问题根源 #

你触发LateInitializationError的核心原因是对late关键字的用法错误：

1. late List<Track> trackList声明的是不可为空的列表类型，本身不可能为null，但你在build方法第一行就执行if(trackList == null)判断，访问未初始化的late变量直接触发错误。
2. late要求变量必须在首次访问前完成赋值，你首次访问trackList时还没有执行数据加载逻辑，没有给变量赋值，自然会报错。
3. 冗余的FutureBuilder使用逻辑导致每次页面build都会重复发起接口请求，进一步放大了初始化时机错误的问题。

修复方案 #

第一步：调整变量声明 #

移除late修饰，直接给列表初始化空值，从根源避免未初始化错误：

// 替换原声明代码
List<Track> trackList = [];
// 可选：新增加载状态变量优化交互
bool isLoading = false;

删除build方法开头的if(trackList == null)判断逻辑，已经不需要做null校验。

第二步：调整数据加载时机 #

在页面初始化的initState生命周期里只调用一次数据加载，避免重复请求：

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

优化loadList方法，增加加载状态和异常捕获：

Future loadList() async {
  setState(() => isLoading = true);
  try {
    final result = await api.getTracks();
    setState(() {
      trackList = result;
    });
  } catch (e) {
    // 可自行添加错误提示逻辑
    debugPrint('数据加载失败：$e');
  } finally {
    setState(() => isLoading = false);
  }
}

第三步：简化UI渲染逻辑 #

移除冗余的FutureBuilder嵌套，直接根据状态渲染对应UI即可，完整的build方法示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: const Color(0xff121219),
    appBar: AppBar(
      backgroundColor: const Color(0xff121219),
      actions: [
        IconButton(
          icon: const Icon(Icons.music_note),
          tooltip: 'Increase volume by 10',
          onPressed: () {},
        ),
      ],
      title: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Image.asset('assets/logo.png', fit: BoxFit.cover, width: 170,),
        ],
      ),
    ),
    body: Center(
      child: isLoading 
        ? const CircularProgressIndicator(color: Color(0xffDE1534),)
        : trackList.isNotEmpty
          ? TracksList(tracks: trackList)
          : Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.only(bottom: 40),
                  child: Image.asset('assets/vinyl.png', fit: BoxFit.cover, width: 170,)
                ),
                const SizedBox(height: 20),
                const Text(
                  'Please tab on the "+" to add tracks',
                  style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize:14 ),
                ),
              ],
            )
    ),
    floatingActionButton: FloatingActionButton(
      backgroundColor: const Color(0xffDE1534),
      onPressed: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return AddDataWidget();
        }));
      },
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

内容的提问来源于stack exchange，提问作者Abdulrhman atta