IconButton selectedIcon not toggling-CodePudding

The play button should toggle to a pause button when I press it. It is currently not doing that. I'm changing the state of the task isRecording attribute and it's printing to show that it is changing each time I press the button, but the selectedIcon is not showing. It's just showing the original icon.

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

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  Task task = Task(name: 'Test Task', order: 0, isRecording: false);
  @override
  Widget build(BuildContext context) {
    print(task.isRecording);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test Screen'),
      ),
      body: Center(
        child: IconButton(
          icon: const Icon(Icons.play_arrow),
          isSelected: task.isRecording,
          selectedIcon: const Icon(Icons.pause),
          onPressed: () {
            setState(() {
              task.isRecording = !task.isRecording;
            });
          },
        ),
      ),
    );
  }
}

CodePudding user response：

The selectedIcon feature is only available for Material3.

This property is only used if [ThemeData.useMaterial3] is true.

Solution: Wrap the IconButton in a Theme and set inside the data the useMaterial3 to true.

return Scaffold(
  appBar: AppBar(
    title: const Text("Test Screen"),
  ),
  body: Center(
    child: Theme(
      data: ThemeData(useMaterial3: true),
      child: IconButton(
        icon: Icon(Icons.play_arrow),
        isSelected: !task.isRecording,
        selectedIcon: Icon(Icons.pause),
        onPressed: () {
          setState(() {
            task.isRecording = !task.isRecording;
          });
        },
      ),
    ),
  ),
);

CodePudding user response：

Your IconButton should look like this

    IconButton(
        icon: task.isRecording ? Icon(Icons.play_arrow) : Icon(Icons.pause),
        isSelected: task.isRecording,
        selectedIcon: const Icon(Icons.pause),
        onPressed: () {
          setState(() {
            task.isRecording = !task.isRecording;
          });
        },
      ),

The catch is that you have to change the icon every time you are setting the state. Hope this helps!