Flutter Codelab 如何将 SizeTransition 转换为 FadeTransition答案

【问题标题】：How to Convert SizeTransition to FadeTransition for Flutter CodelabFlutter Codelab 如何将 SizeTransition 转换为 FadeTransition
【发布时间】：2018-11-15 02:59:31
【问题描述】：

我是 Flutter 和 Dart 的新手。希望能得到一些指导练习的指导。

我正在关注 Flutter Codelab https://codelabs.developers.google.com/codelabs/flutter/index.html?index=..%2F..index#6 并且可以做任何事情。

它要求我们做一个练习

通过将 Container 包装在 FadeTransition 小部件而不是 SizeTransition 中来创建淡入动画效果。

代码如下

@override
Widget build(BuildContext context) {
  return new SizeTransition(
    sizeFactor: new CurvedAnimation(
        parent: animationController, curve: Curves.easeOut),
    axisAlignment: 0.0,
    child: new Container(
      // ... other codes ...
    ),
  );
}

所以我改为 FadeTransition，它需要 opacity 类型为 Animation<Double>

@override
Widget build(BuildContext context) {
  return new FadeTransition(
    opacity: animation
    child: new Container(
      // ... other codes ...
    ),
  );
}

我如何创建或发送animation？（上面的代码会有animation无法识别）。

【问题讨论】：

标签： dart flutter flutter-animation

【解决方案1】：

你可以试试这个

opacity: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(animationController),

CurvedAnimation 用于非线性动画。

在此处查看更多详细信息https://flutter.dev/docs/development/ui/animations/tutorial

【讨论】：

【解决方案2】：

找到答案，参考https://proandroiddev.com/getting-your-hands-dirty-with-flutter-basic-animations-6b9f21fa7d17并进行相应修改。

所以要有FadeTransition，基本上只是替换

opacity: animation

与

opacity: new CurvedAnimation(parent: animationController, curve: Curves.easeIn),

这并不理想，因为每次插入消息时，都会创建一个新的CurveAnimation，但为了简洁的解决方案，我这样做了。

【讨论】：