TickerMode | August more text challenge

Preface:

This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge. To prepare for the August challenge of the nuggets, I’m going to pick 31 components this month that haven’t been introduced before and do a full analysis and attribute introduction. These articles will be used as important material in the collection of the Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

First, understand the TickerMode component

Probably most people have never heard of this component, let alone used it. As we all know that Ticker is the underlying driving force of the animation controller, the TickerMode component can disable/enable all tickers under the subtree, that is, it can invalidate or validate all animations in the subtree. We can use the animation controller to actively start or stop the animation, so what is the value of the TickerMode component, and how does it control all the animation in the subtree? With that in mind, let’s take a closer look at the TickerMode component today.

1.TickerMode Basic information

Below is the definition and constructor of the TickerMode component class, which you can see inherits from the StatelessWidget. The instantiation must pass in Boolean Enabled and Child components.

2. Use of TickerMode

The following buildTestContent method builds the following three components, wrapped in TickerMode. BuildOutSwitch is the Switch Switch above, which is outside the TickerMode component.

If _disable is true, the enabled value of TickerMode is false. At this point, the following two loading components stop moving. As can be seen from this, we did not perform any operation on the animation controllers of the two loading components, nor did we change the component properties for reconstruction. You can directly disable/enable their animation, isn’t that amazing? Components like this that can be plugged in and out, with little or no coupling, yet accomplish a function, increase the flexibility of use.

@override
Widget build(BuildContext context) {
  return Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          buildOutSwitch(),
          TickerMode( / / < TickerMode - useenabled: ! _disable, child: buildTestContent()), ], ); } Widget buildOutSwitch() => Wrap( alignment: WrapAlignment.center, crossAxisAlignment: WrapCrossAlignment.center, children:[ Text('TickerMode outside the Switch:),
            Switch(
            value: _disable,
            onChanged: _onChanged,
          )] ,
        );

Widget buildTestContent() => Wrap(
    alignment: WrapAlignment.center,
    crossAxisAlignment: WrapCrossAlignment.center,
    spacing: 20,
    children: [
      Switch(
        value: _disable,
        onChanged: _onChanged,
      ),
      CupertinoActivityIndicator(),
      CircularProgressIndicator(),
    ],
  );
Copy the code

You may be wondering, why did I put a Switch under the test case? This will better illustrate the scope of TickerMode. Click on the Switch below to Switch the _disable state. You can see that animation is disabled because TickerMode is set to disable: true on the upper layer of the Switch. Comparing the performance of the two switches, you can see that the scope of TickerMode is in the subtree.

Two, TickerMode source implementation

1. TickerMode source analysis

The source code for the TickerMode component is very simple. It consists of three processes: the constructor, the build construct, and the static of method to see the enabled value. The build () method returns the _EffectiveTickerMode, of a static method to check through dependOnInheritedWidgetOfExactType to query the superior _EffectiveTickerMode components. _EffectiveTickerMode is an InheritedWidget that holds enabled data.

2._EffectiveTickerModeSource code analysis

Not surprisingly, _EffectiveTickerMode inherits from InheritedWidget and holds enabled data. This data can then be shared among the subtrees. In this way, in the system of animation, this value should be obtained through the context to process Trick. If you’ve only seen The Flutter Animation Exploration – Mirage of Light, then you should be able to connect here.

3. TickerMode control animation principle

When we use animation, can use the SingleTickerProviderStateMixin or TickerProviderStateMixin to create animation controller. The Ticker and TickerProvider source code is introduced in Article 16 of the Flutter Animation Exploration – Streamer Phantom.

Such as in SingleTickerProviderStateMixin an unremarkable place, with a small code, this is the principle of TickerMode control animation. I wonder how many of you can explain what didChangeDependencies is for and when callbacks are in place, and how many of you are talking about the state management framework, the routing management tool. Even the most basic multiplication tables are not good, to learn mathematical Olympiad?

TickerProviderStateMixin, too, updates the muted attribute of Ticker with tickerMode. of.

A lot of seemingly insignificant things, are vital existence, maybe a small detail, can let you suddenly open up. From here can see TickerMode will only SingleTickerProviderStateMixin or TickerProviderStateMixin effect. That is, if you create the Ticker yourself and do not process it in the didChangeDependencies callback, TickerMode does not manage the Ticker. Thank you for watching. See you tomorrow