当我按下按钮颤动时，有什么办法可以使用补间改变背景颜色

Question

So I am trying to find a way where I can press a button, change the background color then get back to the original color using tween.
Is there anyway I could possibly achieve this?

Answer 1

Here is an example of How you can change background with a tween.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Tween',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _color;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    );

    _color =
        ColorTween(begin: Colors.blue, end: Colors.amber).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(height: 20),
          AnimatedBuilder(
            animation: _color,
            builder: (BuildContext _, Widget? __) {
              return Container(
                width: 500,
                height: 300,
                decoration: BoxDecoration(
                    color: _color.value, shape: BoxShape.rectangle),
              );
            },
          ),
           SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              _controller.forward();
            },
            child: Text('Change background'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: () {
              _controller.reverse();
            },
            child: Text('back to Orignal'),
          ),
        ],
      ),
    );
  }
}