Flutter Slide Transition动画实现问题：无法达成预期效果

1. 调整动画起始偏移量，实现初始显示10%图像 #

修改Tween的起始偏移值，让图像初始时仅顶部10%可见：

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

  controller = AnimationController(vsync: this, duration: const Duration(seconds: 3));

  // 将begin的y值从1.0改为0.9，初始显示顶部10%
  offset = Tween<Offset>(begin: const Offset(0.0, 0.9), end: Offset.zero)
      .animate(controller);

  controller.forward();
}

2. 限制图像在Column指定区域内显示 #

用固定高度的Container包裹ShaderMask并开启裁剪，确保图像不会溢出指定区域，同时解决层级问题：

// 放在Column的目标位置
Container(
  height: 350, // 与图像高度一致，锁定区域
  clipBehavior: Clip.hardEdge, // 裁剪超出容器的部分
  child: ShaderMask(
    shaderCallback: (rect) {
      return const LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          Colors.white,
          Colors.white,
          Colors.white,
          Colors.transparent
        ],
      ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
    },
    blendMode: BlendMode.dstIn,
    child: SlideTransition(
      position: offset,
      child: Image.asset(
        onboardingEntries[index]["imageUrl"],
        height: 350,
        fit: BoxFit.contain, // 确保图像适配容器尺寸
      ),
    ),
  ),
),

关键修改说明 #

• 偏移量调整：Offset(0.0, 0.9)表示图像初始时向下偏移自身高度的90%，仅顶部10%处于可视区域，动画过程中向上滑动至完全显示。
• 容器裁剪：Container的固定高度和clipBehavior确保图像严格限制在Column的指定区域内，不会跑到其他组件后方或溢出。
• 层级修复：若图像仍被其他组件遮挡，检查Column内组件的排列顺序，将该动画组件移至需要显示在上方的位置即可。

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