CODEWITHSUNDEEP
flutterdart
justAnotherOverflowUser
justAnotherOverflowUser

Reputation: 615

Apply Curve to an existing Animation

Project

Hi, I'm learning how to use AnimatedList in Flutter. I was able to add and remove elements to the list with a SizeTransition:

Code

Widget _buildItem(
    BuildContext context, int index, Animation<double> animation) {
  return SizeTransition(
    sizeFactor: animation,
    axis: Axis.vertical,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 50,
        color: Colors.orange,
        child: SizedBox(
          child: Center(
            child: Text(displayList[index].toString()),
          ),
        ),
      ),
    ),
  );
}

Now, I cannot understand how I can add a custom curve to this transition. Is this possibile?

Upvotes: 2

Views: 615

Answers (1)

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126594

Great question!

As the example in the documentation mentions, you can make use of a CurvedAnimation:

CurvedAnimation(
  parent: animation,
  curve: Curves.ease,
  reverseCurve: Curves.easeOut,
),

The reverseCurve parameter is optional. The curved animation will just use the curve in both directions if no reverse curve is supplied.
Applied to your code:

return SizeTransition(
  sizeFactor: CurvedAnimation(
    parent: animation,
    curve: Curves.ease,
  ),
  ...
)

Upvotes: 5

Related Questions