如何为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 ，但是为了简洁的解决方案，我这样做了。

Answer 2

你可以试试这个

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

CurvedAnimation用于非线性动画。

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