I have an animated icon on App Bar (the icon is menu_close). when I press the icon the modal bottom sheet comes up and the icon changes, but after I'm closing the modal bottom sheet the icon won't reverse ( it won't change to menu and remain in close !!!) can anyone help me how to fix this?

class TabsScreen extends StatefulWidget {
  const TabsScreen({Key? key}) : super(key: key);

  @override
  _TabsScreenState createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  bool isPlaying = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 450),
        reverseDuration: const Duration(microseconds: 450));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
      title: const Text(
        'title',
      ),
      actions: <Widget>[
        IconButton(
            icon: AnimatedIcon(
              icon: AnimatedIcons.menu_close,
              progress: _animationController,
            ),
            onPressed: () {
              setState(() {
                if (!isPlaying) {
                  _animationController.forward();
                  showModalBottomSheet(
                    context: context,
                    builder: (context) => Container(
                      color: Colors.deepPurple,
                    ),
                  );
                } else {
                  _animationController.reverse();
                }
              });
            }),
      ],
    ));
  }
}

CodePudding user response：

showModalBottomSheet returns future, you can handle animation like

  onPressed: () async {
              _animationController.forward();
              showModalBottomSheet(
                context: context,
                builder: (context) => Container(
                  color: Colors.deepPurple,
                ),
              ).then((value) {
                _animationController.reverse();
              });
            }