如何像 Flutter 中的专业人士一样从一个小部件平滑过渡到另一个小部件？

Question

我有 shopBasket 图标。按下时，我希望它平滑过渡到另一个图标。下面是图标。有什么小部件吗？我知道有一些选项，例如 AnimatedContainer。但是在这种情况下如何使用它呢？

=>

已编辑

我已经用AnimatedCrossFade解决了：

import 'package:flutter/material.dart';

class IconAnimateWidget extends StatefulWidget {
  @override
  _IconAnimateWidgetState createState() => _IconAnimateWidgetState();
}

class _IconAnimateWidgetState extends State<IconAnimateWidget> {
  bool _firstChild = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedCrossFade(
          firstCurve: Curves.fastOutSlowIn,
          secondCurve: Curves.fastOutSlowIn,
          firstChild: GestureDetector(
              onTap: () {
                setState(() {
                  _firstChild = !_firstChild;
                });
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(child: Icon(Icons.shopping_bag)),
                ],
              )),
          secondChild: GestureDetector(
            onTap: () {
              setState(() {
                _firstChild = !_firstChild;
              });
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.add_circle_outline),
                SizedBox(width: 10),
                Icon(Icons.remove_circle_outline),
              ],
            ),
          ),
          crossFadeState: _firstChild
              ? CrossFadeState.showFirst
              : CrossFadeState.showSecond,
          duration: Duration(milliseconds: 200),
        );
    );
  }
}

希望对其他人有所帮助

Answer 1

只需使用 AnimatedSwitcher：

AnimatedSwitcher(
  duration: Duration(milliseconds: 1000),
  child: _isBasket ? Icon(Icons.shopping_bag) : Icon(Icons.add_circle),
)