Flutter 动画过渡按钮

Question

我需要有关 FLUTTER 的帮助。从一个按钮更改为另一个按钮时是否可以进行动画过渡？ 我想要这样的东西：

点击时，我想要按钮 1 和按钮 2 之间的动画。 你能帮助我吗？谢谢

Answer 1

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

  @override
  State<CircularCharts> createState() => _CircularChartsState();
}

class _CircularChartsState extends State<CircularCharts>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  bool _isButton1Active = true;
  int selectedToggle = 1;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

  void monthlySelected() {
    if (!_isButton1Active) {
      setState(() {
        _isButton1Active = true;
      });
    }
  }

  void yearlySelected() {
    if (_isButton1Active) {
      setState(() {
        _isButton1Active = false;
      });
    }
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 44.r,
          decoration: BoxDecoration(
              color: Colors.green.withOpacity(0.4),
              borderRadius: BorderRadius.circular(100)),
          child: Stack(
            alignment: Alignment.center,
            clipBehavior: Clip.none,
            children: [
              AnimatedAlign(
                alignment: _isButton1Active
                    ? Alignment.centerLeft
                    : Alignment.centerRight,
                duration: const Duration(milliseconds: 300),
                child: Container(
                  width: MediaQuery.of(context).size.width / 2,
                  height: 45.r,
                  decoration: BoxDecoration(
                      color: const Color(0xff9ba0fc),
                      borderRadius: BorderRadius.circular(100)),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  InkWell(
                      onTap: () {
                        monthlySelected();
                      },
                      child: Text(
                        "Monthly",
                        style: TextStyle(color: Colors.black, fontSize: 15.sp),
                      )),
                  InkWell(
                      onTap: () {
                        yearlySelected();
                      },
                      child: Text("Yearly",
                          style:
                              TextStyle(color: Colors.black, fontSize: 15.sp)))
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

}