Flutter 隐式动画

通过几行代码就可以实现隐式动画，由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了，所以叫隐式动画，FLutter中提供的 [AnimatedContainer]、[AnimatedPadding]、[AnimatedPositioned.AnimatedOpacity]、[AnimatedDefaultTextStyle]、[AnimatedSwitcher]都属于隐式动画
隐式动画中可以通过 duration 配置动画时长、可以通过curve (曲线)来配置动画过程

import 'package:flutter/material.dart';

class MyAnimated extends StatelessWidget {
  const MyAnimated({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画'),
      ),
      body: AnimateContent(),
    );
  }
}

class AnimateContent extends StatefulWidget {
  const AnimateContent({super.key});

  @override
  State<AnimateContent> createState() => _AnimateContentState();
}

class _AnimateContentState extends State<AnimateContent> {
  late double width;
  late double height;
  Color color = Colors.indigoAccent;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    width = 200;
    height = 200;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 200),
          width: width,
          height: height,
          color: color,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            width = width == 100 ? 200 : 100;
            height = height == 100 ? 200 : 100;
            color = width == 100 ? Colors.indigoAccent : Colors.red;
          });
        },
        child: Icon(Icons.account_box_sharp),
      ),
    );
  }
}