Flutter如何实现页面跳转前停留数秒展示欢迎页效果

核心实现用Flutter内置的Future.delayed方法做延迟计时，配合路由替换方法完成跳转，注意规避生命周期问题避免报错，完整实现步骤如下： #

实现注意事项 #

• 不要把延迟逻辑写在build方法里：build会随组件重建多次触发，会导致重复计时、重复跳转
• 跳转前必须校验组件挂载状态：如果用户在倒计时期间手动退出页面，未校验直接调用路由会抛出上下文不存在的异常
• 跳转使用pushReplacement而非普通push：欢迎页属于一次性页面，跳转后从路由栈移除，避免用户按返回键回到欢迎页

具体修改步骤 #

1. 把你现有的wlcPage从无状态组件StatelessWidget改成有状态组件StatefulWidget，方便处理生命周期
2. 在组件的initState生命周期里启动延迟任务，设置你需要的停留时长（一般2-3秒体验最佳）
3. 延迟回调里先判断组件挂载状态，再执行路由跳转

修改后的完整可运行代码 #

import 'package:flutter/material.dart';
// 记得引入你要跳转的目标页面，比如首页
// import 'home_page.dart';

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

  @override
  State<wlcPage> createState() => _wlcPageState();
}

class _wlcPageState extends State<wlcPage> {
  @override
  void initState() {
    super.initState();
    // 设置停留时长，这里示例为3秒，可自行修改
    Future.delayed(const Duration(seconds: 3), () {
      // 组件已销毁时不执行跳转，避免报错
      if (!mounted) return;
      // 路由替换跳转到目标页，将HomePage()替换为你自己的目标页面即可
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
      // 如果你用的是命名路由，替换成下面这行即可
      // Navigator.pushReplacementNamed(context, '/home');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('images/appBckgrd.jpg'),
                fit: BoxFit.cover
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const CircleAvatar(
                radius: 80,
                backgroundImage: AssetImage("images/logo.png"),
              ),
              Text('signhouse',
                style: TextStyle(
                  fontFamily: 'OpenSans',
                  fontSize: 30,
                  fontWeight: FontWeight.normal,
                  letterSpacing: 1,
                  color: Colors.teal[700],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 这里是示例的目标首页，替换成你自己的页面即可
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('首页')),
    );
  }
}

可选扩展 #

如果需要更灵活的倒计时控制（比如提前跳过、倒计时进度展示），可以用Timer类替代Future.delayed，在组件dispose生命周期里调用timer.cancel()取消计时即可，基础需求用上面的代码完全可以满足。

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