Flutter AnimatedSwitcher with icon not happening

Question

I'm building a Task List app and I'm stuck to apply some animation to change the task completed icon to another icon to say it is not completed and vice versa.

This is my ListTile that it's part of the list and contains the icon I want to change.

class _TaskListItemState extends State<TaskListItem> {
  @override
  Widget build(BuildContext context) {
    final taskProvider = Provider.of<TaskProvider>(context, listen: false);
    var completeIcon = widget.task.completed //? Icons.check_circle_outline : Icons.panorama_fish_eye;
                        ? CompletedIcon(ValueKey(1), Icons.check_circle_outline)
                        : CompletedIcon(ValueKey(2), Icons.panorama_fish_eye);

    return ListTile(
        leading: IconButton(
          icon: AnimatedSwitcher(
            duration: const Duration(seconds: 3),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(child: child, scale: animation,);
            },
            child: completeIcon,
          ),

          onPressed: () {
            setState(() {
              if (widget.task.completed)
                completeIcon = CompletedIcon(ValueKey(2), Icons.panorama_fish_eye);
              else
                completeIcon = CompletedIcon(ValueKey(1), Icons.check_circle_outline);  
            });

            taskProvider.toggleCompleted(widget.task.id);
          }
        ),

        title: Text(
          widget.task.name,
          style: TextStyle(
            color: Theme.of(context).popupMenuTheme.textStyle.color
          ),
        ),

        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            widget.task.label
              ? Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 2, 0),
                  child: Icon(
                      Icons.label,
                      size: Theme.of(context).iconTheme.size,
                  ),
              )
              : Container(),

            widget.task.dueDate == null
              ? Container()
              : Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 0),
                  child: Icon(
                    Icons.event_available,
                    size: Theme.of(context).iconTheme.size,
                    color: Theme.of(context).iconTheme.color
                  ),
                ),

            widget.task.reminder
              ? Padding(
                  padding: const EdgeInsets.fromLTRB(2, 0, 0, 0),
                  child: Icon(
                      Icons.notifications,
                      size: Theme.of(context).iconTheme.size,
                      color: Theme.of(context).iconTheme.color,
                  ),
              )
              : Container(),

          ],
        ),
      );
    // );
  }
}

This is the Widget I created to separate the icon and change it(don't know if it is necessary)

class CompletedIcon extends StatelessWidget {
  final ValueKey key;
  final IconData icon;

  CompletedIcon(this.key, this.icon);

  @override
  Widget build(BuildContext context) {
    return Icon(
      icon,
      key: key,
      color: Theme.of(context).iconTheme.color,
      size: Theme.of(context).iconTheme.size
    );
  }
}

I did all this following the AnimatedSwitcher documentation, but I get no errors and the icon does not change.

Any help will be appreciated. Thanks.

Answer 1

your unique key is missing, I don't have much knowledge but you can google about unique key in Animated switcher.