Flutter加载屏未显示问题求助（附实现代码）

点击Landing页面的「Get Started」按钮后，Loading屏未在主页出现前显示，而是直接跳转到主页。我期望Loading屏显示约3秒后再跳转至主页，相关带按钮页面的代码如下：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:instacash/screens/Customer%20Onboarding/onboarding/slider_page1.dart';
import 'package:instacash/screens/Customer%20Onboarding/onboarding/slider_page2.dart';
import 'package:instacash/screens/Customer%20Onboarding/onboarding/slider_page3.dart';
import 'package:instacash/screens/Customer%20Onboarding/onboarding/slider_page4.dart';
import 'package:instacash/screens/Customer%20Onboarding/onboarding/slider_page5.dart';
import 'package:instacash/screens/loading.dart';

class Landing extends Stateful Widget {
const Landing({super.key});

 @override
// ignore: library_private_types_in_public_api
 _LandingState createState() => _LandingState();
  }

  class _LandingState extends State<Landing> {
  int _currentPage = 0;
  final PageController _controller = PageController();

  final List<Widget> _pages = [
  const SliderPage1(),
  const SliderPage2(),
  const SliderPage3(),
  const SliderPage4(),
  const SliderPage5(),
  ];

  _onchanged(int index) {
  setState(() {
  _currentPage = index;
   });
   }

   @override
   Widget build(BuildContext context) {
   return Scaffold(
   body: Stack(
    children: <Widget>[
      PageView.builder(
        scrollDirection: Axis.horizontal,
        onPageChanged: _onchanged,
        controller: _controller,
        itemCount: _pages.length,
        itemBuilder: (context, int index) {
          return _pages[index];
        },
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(_pages.length, (int index) {
                return AnimatedContainer(
                    duration: const Duration(milliseconds: 300),
                    height: 10,
                    width: (index == _currentPage) ? 30 : 10,
                    margin: const EdgeInsets.symmetric(
                        horizontal: 5, vertical: 30),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        color: (index == _currentPage)
                            ? Colors.blue.shade900
                            : Colors.white));
              })),
          const SizedBox(
            height: 70,
          ),
          Row(
            //mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              const SizedBox(
                width: 50.0,
              ),
              MaterialButton(
                  onPressed: () => {
                        check(context),
                      },
                  color: Colors.white,
                  height: 50.0,
                  minWidth: 300,
                  elevation: 10.0,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)),
                  child: Text(
                    'Get Started',
                    style: GoogleFonts.poppins(
                      textStyle: const TextStyle(
                          color: Colors.black45,
                          fontSize: 18.0,
                          fontWeight: FontWeight.w500),
                    ),
                  )),
              //const SizedBox(height: 50.0,)
            ],
          ),
          const SizedBox(
            height: 30,
          ),
        ],
      ),
    ],
  ),
);
 }
}

 Future check(context) async {
 await Future.delayed(const Duration(seconds: 3), () {
 const Loading();
  });
 Navigator.pushNamed(context, '/homepage');
 }

我尝试在Future类型的check方法中实现加载屏显示3秒后跳转主页的逻辑，但实际总是直接导航到主页。

解决方案 #

你的代码存在两个核心问题：

• 仅实例化了Loading() widget，但没有通过Flutter导航栈将其展示出来，只是创建了对象并未渲染到界面。
• Navigator.pushNamed没有等待延迟逻辑完成，在延迟的回调执行前就直接触发了页面跳转。

方案一：修改check方法，先显示Loading再延迟跳转 #

Future check(context) async {
  // 先导航到Loading页面
  Navigator.push(context, MaterialPageRoute(builder: (context) => const Loading()));
  // 等待3秒
  await Future.delayed(const Duration(seconds: 3));
  // 关闭Loading页面后跳转到主页
  Navigator.pop(context);
  Navigator.pushNamed(context, '/homepage');
}

方案二：将延迟跳转逻辑封装到Loading页面（更推荐） #

把Loading的展示和跳转逻辑内聚到自身页面，代码结构更清晰：

修改Loading页面的代码：

class Loading extends StatefulWidget {
  const Loading({super.key});

  @override
  State<Loading> createState() => _LoadingState();
}

class _LoadingState extends State<Loading> {
  @override
  void initState() {
    super.initState();
    // 页面加载完成后等待3秒，替换当前页面跳转到主页
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.pushReplacementNamed(context, '/homepage');
    });
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      // 自定义你的Loading界面，比如圆形进度条
      body: Center(
        child: CircularProgressIndicator(color: Colors.blue),
      ),
    );
  }
}

然后修改Landing页面的check方法：

Future check(context) async {
  // 直接导航到Loading页面，后续逻辑由Loading页面自行处理
  Navigator.push(context, MaterialPageRoute(builder: (context) => const Loading()));
}

内容的提问来源于stack exchange，提问作者SEYRAM EMMANUEL AGBANYO