This is the sixth day of my participation in the More text challenge

preface

In the previous article we talked about several pure Flutter single-attribute animation components. In this article we will look at the slightly more complex “AnimatedCrossFade, AnimatedSwitcher, AnimatedSize” components. The complexity here means using more attention points and flexibility in configuration.

AnimatedCrossFade

Sometimes we need to switch between two widgets. Switching directly is very abrupt. We can add a fade in and out effect



The code below is simple enough to set up two child widgets

GestureDetector(
  onTap: () {
    // Click toggle
    this.crossFirst = ! crossFirst; setState(() {}); }, child: AnimatedCrossFade(// first child
    firstChild: DescContainer(
      height: 60,
      width: width,
      color: Colors.black,
      text: 'AnimatedCrossFade firstChild',),// Second child
    secondChild: DescContainer(
      height: 40,
      width: 300,
      color: Colors.pink,
      text: 'AnimatedCrossFade secondChild',),// Toggle display child
    crossFadeState: crossFirst
    ? CrossFadeState.showFirst
    : CrossFadeState.showSecond,
    duration: duration,
  ),
),
Copy the code

Optimize the obtrusion

Although the implementation is switched, but infirstChild => secondChildIs still very abrupt, we need to customize the SettingslayoutBuilderAttributes to optimize.

Look at the source code



This is the defaultlayoutBuilderUsing thedefaultLayoutBuilderWe can make two changes.

AnimatedCrossFade(
  ...
  layoutBuilder:(topChild, topChildKey, bottomChild, bottomChildKey) {
    return Stack(
      clipBehavior: Clip.none,
      // Set the center alignment here
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          key: topChildKey,
          child: topChild,
        ),
        Positioned(
          key: bottomChildKey,
          // Remove the left and right positions
          / / left: 0.0,
          top: 0.0./ / right: 0.0.child: bottomChild, ), ], ); },),Copy the code

Other attributes

  • firstChildThe first Child widget
  • secondChildSecond Child widget
  • firstCurveFirst curve animation
  • secondCurveSecond curve animation
  • sizeCurveSize of the curve animation,Why do we have this property, which we'll talk about next
  • alignmentalignment
  • crossFadeStateFade in state
  • durationAnimation time
  • reverseDurationReturn to animation time
  • layoutBuilderThe layout is built, which is what we said above

AnimatedSize (animation size)

Now go back and check it outAnimatedCrossFadeSource code you will find is usedClipRectTailoring (see my columnThe Use of Clipping Widgets in Flutter) +AnimatedSizeThe implementation.



Let’s look at the implementation first

GestureDetector(
  onTap: () {
    this.size = size == 200 ? 100 : 200;
    setState(() {});
  },
  child: AnimatedSize(
    duration: duration,
    // Add TickerProviderStateMixin
    vsync: this,
    clipBehavior: Clip.antiAlias,
    alignment: Alignment.center,
    child: FlutterLogo(
      size: size,
    ),
  ),
),
Copy the code

What you see here is actually an illusion, so let’s change its child.

AnimatedSize(
  child: DescContainer(
    // Here! Mark the point where we are sure it is not null and is null safe
    color: Colors.pink[300]! , height: size, width: size, text:'AnimatedSize',),)Copy the code

Actually see the effect and us aboveAnimatedCrossFadeSame thing, very abrupt on the second conversion, and then go back and lookFlutterLogoThe implementation of the



Ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha.AnimatedContainer is used to animate your widgets in FlutterImplementation is consistent, how to deal with it?

  • You can refer toAnimatedCrossFadeTo use LayoutBuilder
  • You can readAnimatedContainerSource code to optimize, temporarily not to start a chat

AnimatedSwitcher
Not set the key Set up the key 
GestureDetector(
  onTap: () {
    this.playing = ! playing; setState(() {}); }, child: AnimatedSwitcher( duration: duration, child: Icon( playing ? Icons.pause_circle : Icons.play_circle,// The key here is very important
      key: ValueKey(playing),
      size: 80,
      color: Colors.blue,
    ),
  ),
),
Copy the code

Extend the

We can also add effects such as scaling, and then use the transitionBuilder
ScaleTransition FadeTransition ScaleTransition + FadeTransition 
AnimatedSwitcher(
  duration: duration,
  transitionBuilder: (child, animation) {
    // Zoom effect
    return ScaleTransition(
      scale: animation,
      // Gradient effect
      child: FadeTransition(
        opacity: animation,
        child: child,
      ),
    );
  },
  child: Icon(
    playing ? Icons.pause_circle : Icons.play_circle,
    // The key here is very important
    key: ValueKey(playing),
    size: 80,
    color: Colors.blue,
  ),
)
Copy the code

There are also many transitions built into Flutter, such as SizeTransition, PositionedTransition, AlignTransition, SlideTransition, and so on, which can be easily combined. Expect lots of discoveries and ideas from you.

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • AnimatedCrossFade (Flutter Widget of the Week)
  • Flutter-AnimatedCrossFade
  • Flutter-AnimatedSize
  • AnimatedSwitcher (Flutter Widget of the Week)
  • Flutter-AnimatedSwitcher
  • Flutter-ScaleTransition
  • FadeTransition (Flutter Widget of the Week)
  • Flutter-FadeTransition

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible