AnimatedContainer in flutter is actually a good confession

Valentine's Day seems to be not long recently, no matter if you have a girlfriend or not, you can learn it

Ha, I saw this component by chance, and suddenly felt that it could be used to confess , my little fans, let’s collect and learn

In fact, I have written a similar code for beating heart before, but at that time I used CSS, put a link: link .
Today I will write another one with flutter

Animatedcontainer is a container with its own animation function.
We only need to provide the start and end values ​​of the animation to the component to make it move.

(1) Effect picture:

(2) Implementation principle:
Using the AnimatedContainer component that can be changed, we prepare a png picture (without matting), and give the picture to you

Let the components in the process of zooming in and out of the change transition to our prepared love, and then the picture of the love can be changed

(3) Code implementation
Just copy and run. If the picture needs configuration file configuration, see the link: link .

import 'package:flutter/material.dart';

void main() => (runApp(MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AnimatedContainerPage(),
    );
  }
}

class AnimatedContainerPage extends StatefulWidget {
  @override
  _AnimatedContainerPageState createState() => _AnimatedContainerPageState();
}

class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
  bool click = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            click = !click;
          });
        },
        child: AnimatedContainer(
          //把动画作用在宽高上
          height: click ? 200 : 100,
          width: click ? 200 : 100,
          decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/aixin.png'),
                fit: BoxFit.cover,
              ),
              borderRadius: BorderRadius.all(Radius.circular(
                click ? 200 : 0,
              ))),
          duration: Duration(seconds: 3),
          curve: Curves.linear,
          onEnd:(){//结束后的状态
            setState(() {
              click=!click;
            });
          } ,
        ),
      ),
    );
  }
}

That’s it for today, my little fans, bye, tweeted~>_<