flutter里AnimatedContainer居然是表白的一把好手

最近情人节好像要没多久了欸，不管你有没有女朋友都可以学起来哦

哈，偶然看到该组件，突然觉得可以用来表白欸，我的小粉丝们，收藏学起来吧

其实以前我也写过一个类似的跳动的心的代码，只不过那个时候是用的css，放一个链接：link.
今天就用flutter再写一个

animatedcontainer 是一个自带动画功能的container，
我们只需要给该组件提供动画的开始和结束值，就可以让它动起来。

（一）效果图：

（二）实现原理：
利用可以变化的AnimatedContainer组件，我们准备好一张png图，（免抠图），把图片给你们

让组件在放大缩小的变化过程过渡到我们准备好的爱心上，然后这个爱心的图片就可以变化啦

（三）代码实现
复制即可运行，图片需要配置文件配置的，看链接：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;
            });
          } ,
        ),
      ),
    );
  }
}

今天就这样，我的小粉丝们，拜拜，啾咪~>_<