Flutter页面导航添加加载指示器及加载屏无法关闭问题求助

问题原因 #

你当前的LoadingScreen是无状态组件，仅展示加载动画但没有任何自动退出/导航的逻辑；按钮代码里的then回调只会在LoadingScreen被主动pop后才会触发，而现在加载页没有自动关闭的逻辑，导致后续跳转登录页的代码永远不会执行。

解决方案一：改造LoadingScreen为有状态组件，自动延迟跳转 #

将LoadingScreen改为StatefulWidget，在初始化时添加延迟逻辑，自动关闭当前加载页并跳转到登录页：

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

class LoadingScreen extends StatefulWidget {
  static String id = 'loading_screen';
  const LoadingScreen({Key? key}) : super(key: key);

  @override
  State<LoadingScreen> createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  @override
  void initState() {
    super.initState();
    // 模拟加载耗时（比如2秒），完成后跳转登录页并关闭加载屏
    Future.delayed(const Duration(seconds: 2), () {
      // 替换当前路由，避免返回时回到加载屏
      Navigator.pushReplacementNamed(context, LoginScreen.id);
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        // 简化SpinKitCircle的颜色设置，无需重复判断index
        child: SpinKitCircle(color: Colors.white),
      ),
    );
  }
}

此时按钮代码可以简化，无需then回调：

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, LoadingScreen.id);
  },
)

解决方案二：使用加载对话框替代单独加载页（更轻量） #

如果不需要单独的加载页面，可直接在按钮点击时弹出加载对话框，完成后关闭并跳转：

ElevatedButton(
  onPressed: () async {
    // 弹出不可关闭的加载对话框
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => const Center(
        child: SpinKitCircle(color: Colors.white),
      ),
    );

    // 模拟实际加载操作（比如接口请求）
    await Future.delayed(const Duration(seconds: 2));

    // 关闭加载对话框，再跳转到登录页
    Navigator.pop(context);
    Navigator.pushNamed(context, LoginScreen.id);
  },
)

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