FadeTransition 是 Flutter 中用于 淡入淡出动画 的 Widget。它通常和 AnimationController 搭配使用，用于让子组件的透明度在一段时间内逐渐变化（从透明到不透明或相反）。

---

✅ 基本语法：

FadeTransition({
  required Animation<double> opacity,
  required Widget child,
})

• opacity: 一个值在 [0.0, 1.0] 之间的 Animation<double>，表示透明度（0 为完全透明，1 为完全不透明）。
• child: 被动画包裹的组件。

---

✅ 示例：淡入一个图片

import 'package:flutter/material.dart';

class FadeDemo extends StatefulWidget {
  @override
  _FadeDemoState createState() => _FadeDemoState();
}

class _FadeDemoState extends State<FadeDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );

    _controller.forward(); // 开始动画
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FadeTransition 示例')),
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Image.asset('assets/image.png'),
        ),
      ),
    );
  }
}

---

✅ 可搭配的场景

• 页面切换动画（PageRouteBuilder）
• 显示提示弹窗
• 内容加载时逐渐显示
• 悬浮按钮淡入淡出

---

✅ 搭配 Tween

你可以通过 Tween 自定义透明度范围：

_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);

---

❗注意事项

• 必须提供一个 Animation<double>，不能是静态值。
• 如果想要多个组件同时淡入淡出，可以复用 AnimationController。

---