Search code examples
flutterflutter-animation

Different in and out curve for animated opacity widget flutter?


I have code below , a AnimatedOpacity widget with animation curve Curves.elasticIn. That curve used in both opacity 1 to 0 and 0 to 1.How i can use two different curve for opacity 1 to 0 and 0 to 1. ?

AnimatedOpacity(
    opacity: _trueOrFalse? 1.0 : 0.0,
    curve: Curves.elasticIn,
    duration: const Duration(milliseconds: 2000),
    child: Center(
    child: SvgPicture.asset("assets/....svg"),
    ),

Solution

  • You can use it as you have done with opacity.

    AnimatedOpacity(
        opacity: _trueOrFalse? 1.0 : 0.0,
    
        *//if opacity is 1.0 then use elasticIn Curve else use elasticOut for 0.0 opacity*
        curve: _trueOrFalse? Curves.elasticIn: Curves.elasticOut,
    
        duration: const Duration(milliseconds: 2000),
        child: Center(
        child: SvgPicture.asset("assets/....svg"),
        ),