How to Convert SizeTransition to FadeTransition for Flutter Codelab

Viewed 2606

I'm new to Flutter and Dart. Hopes to get some guide on a tutorial exercise I'm stuck.

I'm following Flutter Codelab https://codelabs.developers.google.com/codelabs/flutter/index.html?index=..%2F..index#6 and able to do everything.

There's an exercise it ask us to do that is

Create a fade-in animation effect by wrapping the Container in a FadeTransition widget instead of a SizeTransition.

The code as below

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

So I change to FadeTransition, which requires opacity of type Animation<Double>

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

How could I create or send in the animation? (the above code will have animation unrecognizable).

2 Answers
Related