Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Violet Haze: I left something in your heart…

That girl left a tear in my heart. I could feel how sad she was at that time. — A Chinese Odyssey

preface

This article begins with one of the classic lines from A Chinese Odyssey (there are too many of them to count: 👍🏻👍🏻 college Of Medicine), which is a tribute to Chow chow. Yesterday, I started to see the use of AnimatedPadding. I felt that there was nothing interesting in animation. I made an effect similar to water wave, but the effect was not satisfactory. Then, I suddenly thought of the scene of the Journey to the West.

If Only Supreme Treasure could have seen the tears of zixia fairy in his own heart… Unfortunately not if.

AnimatedPadding introduction

The AnimatedPadding component animates the inner margin of its child and parent. By adjusting the internal margins, you can change the size of the child components to give the impression that the child components are zooming in and out, as shown below.

The AnimatedPadding constructor is defined as follows:

 AnimatedPadding({
    Key? key,
    required this.padding,
    this.child,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  });
Copy the code

As with other AnimatedXX components, the difference is the padding argument, which adjusts the padding between the child and parent components.

Application: A beating heart

Let’s simply reproduce the scene of zixia fairy crying in the heart of Sovereign Treasure. The effect is as follows:

This is just two images stacked on top of each other, and then AnimatedPadding is used to animate the inner margin of the heart Stack to create a heartbeat effect. The onEnd callback is used to restart the animation for iterative animation. The source code is as follows:

class AnimatedPaddingDemo extends StatefulWidget {
  AnimatedPaddingDemo({Key? key}) : super(key: key);

  @override
  _AnimatedPaddingDemoState createState() => _AnimatedPaddingDemoState();
}

class _AnimatedPaddingDemoState extends State<AnimatedPaddingDemo> {
  final initialPadding = 60.0;
  var padding;
  final duration = 800;
  bool started = false;
  @override
  void initState() {
    padding = initialPadding;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedPadding'),
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          child: AnimatedPadding(
            padding: EdgeInsets.all(padding),
            duration: Duration(milliseconds: duration),
            curve: Curves.easeInCubic,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Image.asset(
                  'images/heart.png',
                ),
                ClipOval(
                  child: Image.asset(
                    'images/zixia.png',
                    width: 60,
                    height: 60,
                    fit: BoxFit.fitHeight,
                  ),
                ),
              ],
            ),
            onEnd: () {
              if (started) {
                setState(() {
                  if (padding < initialPadding) {
                    padding = initialPadding;
                  } else {
                    padding -= 20.0; }}); } }, ), ), ), floatingActionButton: FloatingActionButton( child: Icon(started ? Icons.stop : Icons.play_arrow, color: Colors.white), onPressed: () { setState(() {if (padding < initialPadding) {
              padding = initialPadding;
            } else {
              padding -= 20.0; } started = ! started; }); },),); }}Copy the code

conclusion

AnimatedPadding allows you to animate the inner margin of a child component within a parent component. AnimatedPadding, I don’t know how to do it, but if you zoom in and out that’s fine, but you can also do it using the Scale method Matrix4, One of the benefits of using AnimatedPadding should be that it does not go beyond the boundaries of the parent component (the padding is not allowed to be negative; exceptions are thrown). If you have a good idea of how to use AnimatedPadding, please share it in the comments section at 🙏🏻.

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!