如何在Flutter中实现类似Vue的渐变动画效果？

极客俊杰提问于 2026-01-25 03:17:13 阅读 26

移动

最近在尝试从Vue转到Flutter开发，想实现一个按钮点击后颜色平滑过渡的效果。之前用Vue时很简单，直接使用CSS就能搞定。

<button @click="changeColor" :style="{ backgroundColor: color }">Change Color</button>
<script>
export default {
  data() {
    return { color: '#ff0000' };
  },
  methods: {
    changeColor() {
      this.color = this.color === '#ff0000' ? '#00ff00' : '#ff0000';
    }
  }
}
</script>

但在Flutter里试了几个方法，要么太复杂，要么效果不理想。有人能分享个简单的例子或者推荐个库吗？现在有点迷茫了。

动画效果

我来解答赞 5 收藏

反馈

1 条解答

爱学习的景源 Lv1

在Flutter里实现这种渐变动画效果，用 AnimatedContainer 是效率更高也更简单的方式。它专门用来做这种需要平滑过渡的属性变化，比如颜色、大小等。

直接上代码：

import 'package:flutter/material.dart';



void main() {

  runApp(MyApp());

}



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(title: Text('Color Transition Example')),

        body: ColorTransitionButton(),

      ),

    );

  }

}



class ColorTransitionButton extends StatefulWidget {

  @override

  _ColorTransitionButtonState createState() => _ColorTransitionButtonState();

}



class _ColorTransitionButtonState extends State {

  Color _color = Colors.red;



  void _changeColor() {

    setState(() {

      _color = _color == Colors.red ? Colors.green : Colors.red;

    });

  }



  @override

  Widget build(BuildContext context) {

    return Center(

      child: AnimatedContainer(

        duration: Duration(seconds: 1),

        width: 200,

        height: 50,

        decoration: BoxDecoration(

          color: _color,

          borderRadius: BorderRadius.circular(10),

        ),

        child: ElevatedButton(

          onPressed: _changeColor,

          style: ElevatedButton.styleFrom(primary: Colors.transparent, shadowColor: Colors.transparent),

          child: Text('Change Color'),

        ),

      ),

    );

  }

}

关键点：
1. AnimatedContainer 自带动画效果，只需要设置 duration。
2. 点击按钮时调用 setState 改变颜色状态，容器会自动完成平滑过渡。

这样写比手动控制动画简单多了，性能也挺好，推荐用这种方式。

2026-01-31 11:00