dart - 如何为Flutter Codelab将SizeTransition转换为FadeTransition

Question

我是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)。

Answer 1

通过引用https://proandroiddev.com/getting-your-hands-dirty-with-flutter-basic-animations-6b9f21fa7d17找到答案并进行相应的修改。

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

opacity: animation

与

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

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