Flutter启动页实现Logo淡入淡出并跳转页面问题求助

要实现Logo先淡入、再淡出，最后跳转的效果，无需依赖包，只需调整状态变量和动画时序即可。以下是修改后的代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shopperbr1/t.dart';

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  double _opacity = 0.0; // 用double控制透明度，替代原bool变量

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

  Future runSplashAnimation() async {
    // 初始延迟（可选，让启动页先空白一会再开始淡入）
    await Future.delayed(const Duration(milliseconds: 500));
    
    // 执行淡入动画：透明度从0→1
    setState(() {
      _opacity = 1.0;
    });
    // 保持Logo显示2秒
    await Future.delayed(const Duration(seconds: 2));
    
    // 执行淡出动画：透明度从1→0
    setState(() {
      _opacity = 0.0;
    });
    // 等待淡出动画完成（和AnimatedOpacity的duration一致）
    await Future.delayed(const Duration(seconds: 1));
    
    // 跳转到目标页面
    Get.offAll(() => const t());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              duration: const Duration(seconds: 1), // 淡入/淡出的动画时长
              opacity: _opacity, // 绑定动态透明度变量
              child: const Image(
                image: AssetImage('assets/images/transparent_logo.png'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 将原bool animate改为double _opacity，可以精确控制透明度在0（完全透明）到1（完全显示）之间切换，同时实现淡入和淡出效果
• 调整动画时序：先延迟后淡入，保持显示一段时间，再淡出，最后等待淡出动画完成后再跳转，避免页面切换和淡出动画冲突
• AnimatedOpacity的opacity直接绑定_opacity变量，每次setState都会触发透明度动画

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