Flutter中CircularProgressIndicator添加代码后崩溃显示叉号问题

核心问题 #

1. 未初始化的_context变量：你声明了late BuildContext _context;但从未对其赋值，在_loadUserInfo中调用Navigator.of(_context)时，这个变量处于未初始化状态，直接触发Flutter框架错误，导致加载指示器消失并显示错误叉号。
2. initState调用顺序错误：你先执行了_loadUserInfo()再调用super.initState();，不符合Flutter生命周期规范，可能引发上下文相关异常。

修复步骤 #

• 删除无用的late BuildContext _context;变量，直接使用build方法提供的context。
• 调整initState执行顺序，先调用super.initState();再执行异步逻辑。
• 将所有Navigator.of(_context)替换为Navigator.of(context)。

修改后的完整代码 #

import 'package:blog_project/screens/home.dart';
import 'package:blog_project/service/constant.dart';
import 'package:blog_project/service/user_service.dart';
import 'package:flutter/material.dart';
import 'login.dart';

class Loading extends StatefulWidget {
  @override
  _LoadingState createState() => _LoadingState();
}

class _LoadingState extends State<Loading> {
  void _loadUserInfo() async {
    String token = await getToken();
    if (token == '') {
      Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(builder: (context) => Login()), (route) => false);
    } else {
      ApiResponse response = await getUserDetail();
      if (response.error == null) {
        Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) => Home()), (route) => false);
      } else if (response.error == unauthorized) {
        Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) => Login()), (route) => false);
      } else {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('${response.error}'),
        ));
      }
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.white,
      child: const Center(child: CircularProgressIndicator()),
    );
  }
}

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