Analysis of Flutter-AnimatedWidget component source code example

AnimatedWidget Component

In daily development, it may appearFlutter SDKThe built-in animation components cannot meet our actual development needs;

In this case, we canAnimatedWidgetComponent customizationAnimation components, this blog shareAnimatedWidgetComponent-related content, record onceAnimatedWidgetSource code interpretation of components.

AnimatedWidget component source code interpretation

abstract class AnimatedWidget extends StatefulWidget {
  const AnimatedWidget({
    Key? key,
    required ,
  }) : assert(listenable != null),
       super(key: key);
  final Listenable listenable;
  @protected
  Widget build(BuildContext context);
  @override
  State<AnimatedWidget> createState() => _AnimatedState();
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    (properties);
    (DiagnosticsProperty<Listenable>('animation', listenable));
  }
}
class _AnimatedState extends State<AnimatedWidget> {
  @override
  void initState() {
    ();
    (_handleChange);
  }
  @override
  void didUpdateWidget(AnimatedWidget oldWidget) {
    (oldWidget);
    if ( != ) {
      (_handleChange);
      (_handleChange);
    }
  }
  @override
  void dispose() {
    (_handleChange);
    ();
  }
  void _handleChange() {
    setState(() {
      // The listenable's state is our build state, and it changed already.
    });
  }
  @override
  Widget build(BuildContext context) => (context);
}

The above isAnimatedWidgetThe source code of the component is interpreted as follows:

• AnimatedWidgetA component is a stateful component, and it encapsulates a template for implementing animations;
• In the construction methodlistenableThe object refers toAnimationobject;
• RewritebuildMethod, pass in a component that uses animation;
• _AnimatedState.initState(), set a monitor for the animation and automatically call it during the animation execution processsetState()Update status;
• _AnimatedState.dispose(), release the animation monitor to prevent memory leaks.

Through the interpretation of the source code, we can find that implementing our own custom animation is relatively simple, and we only need to inheritAnimatedWidgetComponent, then rewritebuild()method. I hope this article will be helpful to my friends.

The above is the detailed content of the analysis of the source code example of the Flutter-AnimatedWidget component. For more information about the Flutter-AnimatedWidget component, please follow my other related articles!