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

preface

Animations are often used for scene transitions, such as swiping, zooming, and sizing. To cope with these transitions, Flutter provides a Transition animation component that makes scene transitions easier. This article looks at some of the most common applications of the Transition component.

CupertinoFullscreenDialogTransition

Name display is apple style full screen dialog conversion effect, the construction method is as follows:

CupertinoFullscreenDialogTransition({
  Key? key,
  required Animation<double> primaryRouteAnimation,
  required Animation<double> secondaryRouteAnimation,
  required this.child,
  required bool linearTransition,
}) 
Copy the code

The build method is defined as follows, and uses two Slidetransitions to implement the dynamic effect. SecondaryRouteAnimation set begin and End to be the same if the animation moves in only one direction.

Widget build(BuildContext context) {
  assert(debugCheckHasDirectionality(context));
  final TextDirection textDirection = Directionality.of(context);
  return SlideTransition(
    position: _secondaryPositionAnimation,
    textDirection: textDirection,
    transformHitTests: false,
    child: SlideTransition(
      position: _positionAnimation,
      child: child,
    ),
  );
}
Copy the code

Below is a sample of us to achieve animation, child components of the Column, and the use of a CupertinoFullscreenDialogTransition components, made after a pop up below will be squeezed up on it.

CupertinoPageTransition

CupertinoPageTransition and CupertinoFullscreenDialogTransition are similar, just CupertinoPageTransition is horizontal. The same goes for the constructor parameters:

CupertinoPageTransition({
  Key? key,
  required Animation<double> primaryRouteAnimation,
  required Animation<double> secondaryRouteAnimation,
  required this.child,
  required bool linearTransition,
})
Copy the code

We’ve implemented a side drawer effect with the Cupertino Transition.

DecoratedBoxTransition

As the name indicates, it is known to change the property of the child component’s outer box to implement dynamic effect. It is actually quite interesting to do, and the following is an official example code:

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  final DecorationTween decorationTween = DecorationTween(
    begin: BoxDecoration(
      color: const Color(0xFFFFFFFF),
      border: Border.all(style: BorderStyle.none),
      borderRadius: BorderRadius.circular(60.0),
      shape: BoxShape.rectangle,
      boxShadow: const <BoxShadow>[
        BoxShadow(
          color: Color(0x66666666),
          blurRadius: 10.0,
          spreadRadius: 3.0,
          offset: Offset(0.6.0),
        )
      ],
    ),
    end: BoxDecoration(
      color: const Color(0xFFFFFFFF),
      border: Border.all(
        style: BorderStyle.none,
      ),
      borderRadius: BorderRadius.zero,
      // No shadow.));late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 3),
  )..repeat(reverse: true);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: DecoratedBoxTransition(
          position: DecorationPosition.background,
          decoration: decorationTween.animate(_controller),
          child: Container(
            width: 200,
            height: 200,
            padding: const EdgeInsets.all(10),
            child: constFlutterLogo(), ), ), ), ); }}Copy the code

The result is as follows, there is a feeling of transition from flat to solid object, and the dynamic effect changes smoothly.

FadeTransition

FadeTransition is a gradual Animation effect. The example is very simple. You can use an Animation to control the transparency of the Animation to achieve the corresponding Animation effect.

Widget build(BuildContext context) {
  return Container(
    color: Colors.white,
    child: FadeTransition(
      opacity: _animation,
      child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
    ),
  );
}
Copy the code

PositionedTransition

A little like animatedtoy, it changes the position of the piece in the Stack to provide an animation. Here is the official sample code.

@override
Widget build(BuildContext context) {
  const double smallLogo = 100;
  const double bigLogo = 200;

  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      final Size biggest = constraints.biggest;
      return Stack(
        children: <Widget>[
          PositionedTransition(
            rect: RelativeRectTween(
              begin: RelativeRect.fromSize(
                  const Rect.fromLTWH(0.0, smallLogo, smallLogo), biggest),
              end: RelativeRect.fromSize(
                  Rect.fromLTWH(biggest.width - bigLogo,
                      biggest.height - bigLogo, bigLogo, bigLogo),
                  biggest),
            ).animate(CurvedAnimation(
              parent: _controller,
              curve: Curves.elasticInOut,
            )),
            child: const Padding(
                padding: EdgeInsets.all(8), child: FlutterLogo()), ), ], ); }); }Copy the code

The result is that you can change not only the location but also the size.

RotationTransition

Rotate the animation effect and then rotate the component around the Z axis. The construction method is as follows, where turns controls the animation object and alignment determines the relative position to begin rotation.

RotationTransition({
  Key? key, 
  required Animation<double> turns, 
  Alignment alignment, 
  FilterQuality? filterQuality, 
  Widget? child
})
Copy the code

ScaleTransition

Zoom dynamic effect, let’s blow blow blow! Blow up a big balloon! I have already introduced it. I will not repeat it here. You can read the previous article.

SizeTransition

Size change dynamic effect, can refer to superman flying! Full screen power animation! This article.

SlideTransition

Sliding dynamic effect, can realize the sliding component sliding effect, specific can be seen, sliding switch to the next little sister! This article.

conclusion

This article lists the use of the Transition series of Flutter dynamic components. It can be used as a reference manual for your daily use.

extra

I have two 50% off gold digging-book coupons (valid until 23:59, November 30, 2021). If you need them, you can add my wechat island-coder, first-come, first-served, free gift!

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!