Flutter实现从左到右动画效果的启动屏方法咨询

方法一：用animated_splash_screen包自定义过渡动画 #

不用修改包源码，直接通过transitionFunction参数自定义滑入动画即可：

AnimatedSplashScreen(
  splash: Image.asset('assets/splash_logo.png'), // 你的启动图路径
  nextScreen: const HomeScreen(), // 跳转的首页
  splashTransition: SplashTransition.custom,
  transitionFunction: (widget, animation) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(-1.0, 0.0), // 从屏幕左侧外起始
        end: Offset.zero, // 最终回到屏幕中心位置
      ).animate(CurvedAnimation(parent: animation, curve: Curves.easeInOut)),
      child: widget,
    );
  },
  duration: 1500, // 动画时长，可按需调整
)

方法二：结合原生启动屏+自定义路由动画 #

如果想先解决启动白屏问题，可先用flutter_native_splash生成静态原生启动屏，再给首页添加滑入路由动画：

MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (settings) {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => const HomeScreen(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        final tween = Tween(
          begin: const Offset(-1.0, 0.0),
          end: Offset.zero,
        ).chain(CurveTween(curve: Curves.easeInOut));
        return SlideTransition(
          position: animation.drive(tween),
          child: child,
        );
      },
      transitionDuration: const Duration(milliseconds: 1500),
    );
  },
);

方法三：完全自定义启动屏Widget #

自己写一个带动画的StatefulWidget，灵活性最高：

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

  @override
  State<CustomSlideSplash> createState() => _CustomSlideSplashState();
}

class _CustomSlideSplashState extends State<CustomSlideSplash> with SingleTickerProviderStateMixin {
  late AnimationController _animController;
  late Animation<Offset> _slideAnim;

  @override
  void initState() {
    super.initState();
    _animController = AnimationController(
      duration: const Duration(milliseconds: 1500),
      vsync: this,
    );
    _slideAnim = Tween<Offset>(
      begin: const Offset(-1.0, 0.0),
      end: Offset.zero,
    ).animate(CurvedAnimation(parent: _animController, curve: Curves.easeInOut));

    // 动画结束后跳转首页
    _animController.forward().then((_) {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => const HomeScreen()));
    });
  }

  @override
  void dispose() {
    _animController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white, // 自定义启动屏背景色
      body: Center(
        child: SlideTransition(
          position: _slideAnim,
          child: Image.asset('assets/splash_logo.png'),
        ),
      ),
    );
  }
}

将这个CustomSlideSplash设为App的初始页面即可。

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