How to Convert SizeTransition to FadeTransition for Flutter Codelab

Question

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).

Answer 1

Found the answer, by referring to https://proandroiddev.com/getting-your-hands-dirty-with-flutter-basic-animations-6b9f21fa7d17 and modify accordingly.

So to have FadeTransition , basically just replace

opacity: animation

with

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

This is not ideal as every time a message is inserted, it is creating a new CurveAnimation , but for the sake of concise solution, I make it so.

Answer 2

You can try this

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

CurvedAnimation is used for non-linear animation.

See more detail here https://flutter.dev/docs/development/ui/animations/tutorial