Flutter页面跳转时Circle加载器不显示问题求助

问题根源 #

1. 你直接在onTap回调里创建SpinKitCircle Widget，但这个Widget并没有被添加到Flutter的Widget树中，所以不会被渲染显示。
2. 代码同步执行时，Navigator.push会立刻切换页面，加载器根本没有机会展示。

方案1：在当前页面叠加显示加载器（需使用StatefulWidget） #

将当前页面改为StatefulWidget，通过状态变量控制加载器的显示，延迟2秒后再跳转：

class YourCurrentPage extends StatefulWidget {
  const YourCurrentPage({Key? key}) : super(key: key);

  @override
  State<YourCurrentPage> createState() => _YourCurrentPageState();
}

class _YourCurrentPageState extends State<YourCurrentPage> {
  bool _isLoading = false;

  void _handleNavigation() async {
    // 关闭导航窗口
    Navigator.pop(context);
    
    // 开启加载状态，触发UI更新
    setState(() {
      _isLoading = true;
    });

    // 等待2秒
    await Future.delayed(const Duration(seconds: 2));

    // 跳转到目标页面
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const MyChallenges()),
    );

    // 跳转完成后关闭加载状态（若从目标页面返回当前页时恢复）
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 原页面的所有UI内容
        // ... 这里写你原本的页面代码 ...

        // 加载遮罩层：仅在_isLoading为true时显示
        if (_isLoading)
          Container(
            color: Colors.black.withOpacity(0.5), // 半透明遮罩
            child: const Center(
              child: SpinKitCircle(
                color: Colors.purple,
                size: 50.0,
              ),
            ),
          ),
      ],
    );
  }
}

然后将导航栏的onTap改为调用这个方法：

onTap: _handleNavigation,

方案2：用Dialog弹出加载器（无需修改页面状态） #

如果不想将页面改为StatefulWidget，可以直接弹出一个加载对话框，延迟后关闭对话框再跳转：

onTap: () async {
  // 关闭导航窗口
  Navigator.pop(context);

  // 弹出加载对话框（禁止点击外部关闭）
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (ctx) => const Center(
      child: SpinKitCircle(
        color: Colors.purple,
        size: 50.0,
      ),
    ),
  );

  // 等待2秒
  await Future.delayed(const Duration(seconds: 2));

  // 关闭加载对话框
  Navigator.pop(context);

  // 跳转到目标页面
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const MyChallenges()),
  );
},

关键说明 #

• 必须通过setState（方案1）或showDialog（方案2）将加载器加入Widget树，才能让Flutter渲染它。
• 使用Future.delayed配合async/await实现延迟跳转，确保加载器有足够时间展示。

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