Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

In pursuit of a better user experience, we sometimes need a control that beats like a heartbeat to capture the user’s attention. This is a small optimization requirement, but animating a two-piece bundle in Flutter is as long as a foot-binding, so we need to encapsulate an AnimatedWidget to free up productivity.

Realization of animation

Mixed with SingleTickerProviderStateMixin

When creating an AnimationController, you need to pass a vsync parameter. The presence of vsync prevents the animated UI from consuming unnecessary resources when it is not on the current screen. By entering SingleTickerProviderStateMixin.

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{}
Copy the code

Create the animation

Create an animation controller with an interval of nearly a second:

  late final AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    }
Copy the code

The heartbeat animation goes from small to large and then to small, so you need an animation with a value that changes in size:

late final Animation<double> animation; @override void initState() { super.initState(); animController = AnimationController( duration: const Duration(milliseconds: 800), vsync: this, ); Animation = Tween<double>(begin: 0.9, end: 1.05,); }Copy the code

The heartbeat is continuous, so you need to listen for the animation to complete and resume the animation, and then continue to start the animation:

Animation = Tween<double>(begin: 0.9, end: 1.05,).animate(animController).. addListener(() { setState(() {}); }).. addStatusListener((status) { if (status == AnimationStatus.completed) { animController.reverse(); } else if (status == AnimationStatus.dismissed) { animController.forward(); }});Copy the code

Using the zoom control:

Transform.scale(
                scale: animation.value,
                child: const FlutterLogo(
                  size: 80,
                ),
              ),
Copy the code

For the pulsing effect, highlight the pulsing animation and shorten the retracting time:

   animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
Copy the code

Finally, don’t forget to release resources:

  @override
  void dispose() {
    animController.dispose();
    super.dispose();
  }
Copy the code

Separate into small pieces

In order to use a similar animation every time just import, you need to separate the animation and display components. Create a new BounceWidget that contains the animation and can then pass in the UI component:

class BounceWidget extends StatefulWidget {
  final Widget child;

  const BounceWidget({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  State<BounceWidget> createState() => _BounceWidgetState();
}
Copy the code

Continue with the animation:

class _BounceWidgetState extends State<BounceWidget> with SingleTickerProviderStateMixin { late Animation<double> animation; late AnimationController animController; @override void initState() { super.initState(); animController = AnimationController( reverseDuration: const Duration(milliseconds: 700), duration: const Duration(milliseconds: 800), vsync: this, ); Animation = Tween<double>(begin: 0.9, end: 1.05,).animate(animController).. addListener(() { setState(() {}); }).. addStatusListener((status) { if (status == AnimationStatus.completed) { animController.reverse(); } else if (status == AnimationStatus.dismissed) { animController.forward(); }}); animController.forward(); } @override Widget build(BuildContext context) { return Transform.scale( scale: animation.value, child: widget.child, ); } @override void dispose() { animController.dispose(); super.dispose(); }}Copy the code

To introduce animation:

  Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),
Copy the code

Complete code:

void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Padding( padding: const EdgeInsets.only(top: 80, left: 16), child: The Column (crossAxisAlignment: crossAxisAlignment. Start, children: const < widgets > [Text (" move ", style: TextStyle(fontSize: 28, color: color.black,),), color: "color ", style:" color ", Colors.black, ), ), Center( child: BounceWidget( child: FlutterLogo( size: 80, ), ), ), ], ), ), ); }}Copy the code