Flutter动画和运动控件之外观形状的变化DecoratedBoxTransition

computerclass

于 2021-04-05 10:26:19 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/computerclass/article/details/115438874

flutter 专栏收录该内容

220 篇文章

订阅专栏

此篇博客介绍了如何使用DecorationTween创建一个从带有圆角边框的BoxDecoration到无边框效果的动画，通过AnimationController实现3秒循环。展示了如何在Flutter中实现实时背景装饰变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

final DecorationTween decorationTween = DecorationTween(
  begin: BoxDecoration(
    color: const Color(0xFFFFFFFF),
    border: Border.all(style: BorderStyle.none),
    borderRadius: BorderRadius.circular(60.0),
    shape: BoxShape.rectangle,
    boxShadow: const <BoxShadow>[
      BoxShadow(
        color: Color(0x66666666),
        blurRadius: 10.0,
        spreadRadius: 3.0,
        offset: Offset(0, 6.0),
      )
    ],
  ),
  end: BoxDecoration(
    color: const Color(0xFFFFFFFF),
    border: Border.all(
      style: BorderStyle.none,
    ),
    borderRadius: BorderRadius.zero,
    // No shadow.
  ),
);

late AnimationController _controller = AnimationController(
  vsync: this,
  duration: const Duration(seconds: 3),
)..repeat(reverse: true);

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.white,
     child: Center(
       child: DecoratedBoxTransition(
         position: DecorationPosition.background,
         decoration: decorationTween.animate(_controller),
         child: Container(
           width: 200,
           height: 200,
           padding: const EdgeInsets.all(10),
           child: const FlutterLogo(),
         ),
       ),
     ),
   );
 }