Flutter Animation Widget Collection 2

As you can see on my blog, my posts are quite extensive, but fragmented, with the following sections.

AnimatedCrossFade

AnimatedOpacity

AnimatedPadding

AnimatedSize

AnimatedAlign

AnimatedSwitcher

AnimatedPositioned

AnimatedIcon

AnimatedCrossFade

The effect of this control is to transition the display between two controls. Control requires two widgets, one firstChild and one secondChild, to control which child is displayed via crossFadeState and fade in and out when switching.

 void _animating() {
    setState(() {// State switch status =! status; }); } GestureDetector( onTap: _animating, child: Center( child: AnimatedCrossFade( firstChild: Container( width: 200, height: 200, child: Text("First child widget",
                      style: TextStyle(
                          backgroundColor: Colors.deepOrange, fontSize: 30),
                    ),
                  ),
                  secondChild: Text(
                    "Second child widget", style: TextStyle(backgroundColor: Colors. BlueAccent, fontSize: 30),), // Use to control which widget crossFadeState: status to display? CrossFadeState.showFirst : CrossFadeState.showSecond, duration: Duration(milliseconds: 500), ), ), ),Copy the code

The transition effect of the two Child widgets when switching. The guides are only displayed when I enable Debug Paint, so you can ignore them.

AnimatedOpacity

Controls transparency animation, which automatically animates the transparency of the childWidget after the opacity value of opacity is changed.

void _animating() {
    setState(() {// State switch status =! status; }); } GestureDetector( onTap: _animating, child: Center( child: AnimatedOpacity( child: Container( width: 200, height: 200, color: Colors.deepOrange, child: Text("Transparency animation Demo", style: TextStyle(fontSize: 40.0),),), // Automatically animates opacity: status? Duration: duration (milliseconds: 500),),Copy the code

The transparency of the childWidget inside AnimatedOpacity has changed

AnimatedPadding

You can animate the padding of a child control in the same way you animate the padding of an AnimateContainer

void _animating() {
    setState(() {// State switch status =! status; }); } GestureDetector(onTap: _animating, child: Center(child: Container) Color. DeepPurpleAccent, child: AnimatedPadding(// Change the padding child of Text: Text("Padding animation Demo", style: TextStyle(fontSize: 40.0), duration: duration (milliseconds: 500), padding: EdgeInsets. All (status? 50:0.0 (), ((), (Copy the code

You can see that because of the padding change, the outer Container is stretched

AnimatedSize

The intent of this control is to have an animation when the size of the child control changes. However, currently (2019.7.25) this control display is problematic.

Animatecontainer is recommended for resizing controls if you want to use it

GestureDetector(onTap: _animating, Child: AnimatedSize(child: Container(color: Colors. DeepPurpleAccent, // Demonstrates height. height: status ? 60 : 150, child: Text("AnimatedSize animation demo", style: TextStyle(fontSize: 40.0),), duration: duration (milliseconds: Width TickerProviderStateMixin vsync: this,),),Copy the code

As you can see, when you get bigger, you have animation, but when you get smaller, you don’t have the animation you’d expect. More information can be found in the issue. Github.com/flutter/flu…

AnimatedAlign

Animates the alignment of the control

GestureDetector(onTap: _animating, Child: AnimatedAlign(// Center alignment and center right-alignment alignment: status? Alignment.center : Alignment.centerRight, duration: Duration(milliseconds: 500), child: Container( color: Colors.deepPurpleAccent, child: Text("AnimatedAlign animation demo", style: TextStyle(fontSize: 40.0),),),),Copy the code

AnimatedSwitcher

 void _animating() {
    setState(() { switchSize++; status = ! status; }); } GestureDetector(onTap: _animating, Child: AnimatedSwitcher) (Widget child, Animation<double> animation) {returnScaleTransition(child: child, scale: animation); }, // If the key of the childWidget is changed, the animation will be triggered. If the key of the childWidget is changed, the key of the childWidget will be changed. Text("AnimatedSwitcher animation demo${switchSize}", style: TextStyle(fontSize: 40.0),) : Container(width: 50, height: 50, color: color.deeporange,), duration: Duration(milliseconds: 500), ), )Copy the code

This is the animation that switches between Text and Container, which is the effect of the code above

This is an animation that switches directly between different Text values, notice that I set different Text values.

AnimatedPositioned

You can animate the position of the control. But there are some limitations.

  1. The parent Widget must be Stack
  2. In the horizontal dimension there are left, right, and width, one of which must be null
  3. In the vertical dimension, there is top, bottom, height, and one of them must be null

The same animation can also be implemented using AnimateContainer.

 GestureDetector(
          onTap: _animating,
          child: Stack(
            children: <Widget>[
              AnimatedPositioned(
                top: status ? 50 : 100,
                height: status ? 50 : 100,
                left: status ? 50 : 100,
                child: Container(
                  color: Colors.deepPurpleAccent,
                  child: Text(
                    "Animation of Animatedtoy${switchSize}",), duration: duration (milliseconds: 500),,],,),Copy the code

AnimatedIcon

AnimatedIcon, an AnimatedIcon

  @override
  void initState() { super.initState(); _controller = // State with TickerProviderStateMixin AnimationController(vsync: this, duration: Duration(milliseconds: 500)); } void_animating() {
    setState(() {
      if (status) {
        _controller.forward();
      } else{ _controller.reverse(); } status = ! status; }); } GestureDetector( onTap: _animating, child: Wrap( children: <Widget>[ AnimatedIcon( size: 100, icon: AnimatedIcons.arrow_menu, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.menu_arrow, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.close_menu, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.menu_close, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.home_menu, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.menu_home, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.list_view, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.view_list, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.ellipsis_search, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.search_ellipsis, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.add_event, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.event_add, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.pause_play, progress: _controller, ), AnimatedIcon( size: 100, icon: AnimatedIcons.play_pause, progress: _controller, ), ], ), ),Copy the code

Here I’ve listed all the official Animatedicons, which are actually implemented by Path.