“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

Continue toTransitionSeries of animation components, this introductionSizeTransition.SizeTransitionUse to change the dimensions of child components to animate. Animation can be modified vertically or horizontally, and the starting position of dimensional change can be from top, middle, bottom (vertical) or left, middle, right (horizontal). With this write feature, we can build the effects that components fly in.

SizeTransition introduction

The constructor of SizeTransition is defined as follows.

const SizeTransition({
  Key? key,
  this.axis = Axis.vertical,
  required Animation<double> sizeFactor,
  this.axisAlignment = 0.0.this.child,
}) 
Copy the code

The parameters are described as follows:

  • axis: enumeration,verticalIdentify changing component dimensions vertically, that is, changing component height;horizontalRepresents changing component dimensions horizontally, that is, changing the width of the component.
  • sizeFactor: control component size changeAnimationObject. This is actually the width of the component size during animation (horizontal) or height (vertical) multiplied by the value of Animation.
  • axisAlignment: that is, the alignment position of the child components during animation, which defaults to 0.0 and changes the size from the middle; whenaxisforvertical, -1.0 means the top is aligned to start the animation (that is, the size increases from top to bottom); whenaxis δΈΊhorizontal, the starting direction is related to the reverse of the text (TextDirection.ltrorTextDirection.rtl), when the text is left to right (TextDirection. LTR, by default), -1.0 means that the animation starts from the left (that is, the size increases from left to right).

application

For our fly-in animation, we want to fly in from left to right, so we need to set Axis to horizontal and axisAligment to right. For the image, take a superman flying sideways and animate it to make it look like superman is flying in. The complete source code is as follows:

class SizeTransitionDemo extends StatefulWidget {
  SizeTransitionDemo({Key? key}) : super(key: key);

  @override
  _SizeTransitionDemoState createState() => _SizeTransitionDemoState();
}

class _SizeTransitionDemoState extends State<SizeTransitionDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller =
      AnimationController(duration: const Duration(seconds: 3), vsync: this)
        ..repeat();

  // Use custom curve animation transitions
  late Animation<double> _animation = CurvedAnimation(
      parent: _controller, curve: Curves.fastLinearToSlowEaseIn);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SizeTransition'),
        brightness: Brightness.dark,
        backgroundColor: Colors.blue,
      ),
      body: SizeTransition(
        child: Center(
          child: Image.asset(
            'images/superman.png',
            width: 300.0,
            height: 300.0,
          ),
        ),
        sizeFactor: _animation,
        axis: Axis.horizontal,
        axisAlignment: 1.0,),); }@override
  void dispose() {
    _controller.stop();
    _controller.dispose();
    super.dispose(); }}Copy the code

useSizeTransitionImplement other animation effects

We can set the animation to start in the middle, so that it has a scroll opening effect, so let’s take a scroll painting and see what it looks like.The code for this animation is as follows:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('SizeTransition'),
      brightness: Brightness.dark,
      backgroundColor: Colors.blue,
    ),
    body: Container(
      alignment: Alignment.center,
      child: SizeTransition(
        child: Image.asset(
          'images/juanzhou.png',
        ),
        sizeFactor: _animation,
        axis: Axis.horizontal,
        axisAlignment: 0.0,),),); }Copy the code

conclusion

This article describes the use of SizeTransition to control component size changes to animate fly-in or unfold. SizeTransition can also be used for slide-in and slide-out animations, such as slide in for inserting list elements and slide up for deleting list elements.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder. If you feel you have something to gain, please give three pairs of love as follows:

πŸ‘πŸ» : a praise to encourage!

🌟 : Collect articles, easy to look back!

πŸ’¬ : Comment exchange, mutual progress!