Flutter Implicit Animations

In this, we’ll see various flutter implicit animations in a flutter. these widgets are easy to integrate and play with.this blog, covers AnimatedOpacity, AnimatedPadding, AnimatedCrossFade, AnimatedIcon, AnimatedPositioned, AnimatedContainer, TweenAnimationBuilder, AnimatedAlign and AnimatedSize.

ImplicitlyAnimatedWidgets (and their subclasses) automatically animate changes in their properties whenever they change. For this, they create and manage their own internal AnimationControllers to power the animation. While these widgets are simple to use and don’t require you to manually manage the lifecycle of an AnimationController, they are also somewhat limited: Besides the target value for the animated property, developers can only choose a duration and curve for the animation.

AnimatedOpacity

Example:

   AnimatedOpacity(
     duration: const Duration(seconds: 1),
     opacity: _opacity,
     curve: Curves.bounceIn,
     child: Image.network('https://cdn.pixabay.com/photo/2015/01/08/18/24/children-593313_960_720.jpg'),
)

AnimatedPadding

Example:

 AnimatedPadding(
         duration: const Duration(seconds: 1),
         padding: EdgeInsets.all(_padding),
         curve: Curves.bounceIn,
         child: Image.network('https://cdn.pixabay.com/photo/2020/05/13/17/38/foliage-5168308_960_720.jpg'),
)

AnimatedCrossFade

Example:

    AnimatedCrossFade(
            duration: const Duration(seconds: 1),
            crossFadeState: _crossFade? 
            CrossFadeState.showFirst:CrossFadeState.showSecond,
            firstCurve: Curves.bounceIn,
            secondCurve: Curves.bounceInOut,
            sizeCurve: Curves.elasticInOut,
            firstChild:childOne(),
            secondChild: childTwo(),
 )

AnimatedIcon

Example:

Center(
child: IconButton(
                  iconSize: 70,
                  icon: AnimatedIcon(
                  icon: AnimatedIcons.ellipsis_search,
                  progress: controller,
),
onPressed: () {      
 setState(() {
      isPlay = !isPlay;
      isPlay ? controller.forward() : controller.reverse();
    });
},) 
)

AnimatedPositioned

Example:

     AnimatedPositioned(
            duration: Duration(milliseconds: 300),
            top: _animatedPositioned?250:10,
            left: _animatedPositioned?100:10,
            child: Text("CodeSearchOnline.com",style: TextStyle(fontSize: 15),),
)

AnimatedContainer

Example:

AnimatedContainer(
          height: _animatedContainer?100:200,
          width: _animatedContainer?100:200,
          curve:_animatedContainer?Curves.bounceIn:Curves.bounceOut,
          color: _animatedContainer?Colors.blueAccent:Colors.deepPurpleAccent,
          duration: Duration(milliseconds: 600),
)

TweenAnimationBuilder

Example:

TweenAnimationBuilder(
            tween: Tween<double>(
                begin: 0, end: _tweenAnimationBuilder ? 100 : 600),
            duration: Duration(milliseconds: 600),
            curve: Curves.bounceIn,
            builder: (BuildContext context, double _heightWidth, Widget child) {
              return Container(
                height: _heightWidth,
                width: _heightWidth,
                child: Image.network(
                  'https://images.pexels.com/photos/463684/pexels-photo-463684.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                  fit: BoxFit.fill,
                ),
              );
            })

AnimatedAlign

Example:

 AnimatedAlign(
          alignment: _animatedAlign?Alignment.center:Alignment.centerLeft,
          duration: Duration(milliseconds: 600),
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blueGrey,
          ),
)

AnimatedSize

Example:

AnimatedSize(
          vsync: this,
          curve: Curves.easeIn,
          duration: Duration(milliseconds: 600),
          child:Container(
            height:_animatedSize?100:400 ,
            width:_animatedSize?200:600 ,
            color: Colors.deepPurpleAccent,
         ),
        )