How can we reset the second button on click of first button in flutter?

Question

I have two buttons in my page, first one is "Reset" and second is "Play/Pause". To start music I click "Play" button and updates its icon to "Pause" icon so user can Play/Pause music by the single button.(I just updates its icons to play and pause)

Now there is another button "Reset". If music is running I show "Pause" icon on Play button and when user clicks on Reset button I want to update the Pause icon to Play icon. But after trying so many things I am not getting how to do this. I am attaching my code here:

class SystemButtonGroupRight extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData;
    queryData = MediaQuery.of(context);

    if (queryData.size.width > 550) {
      systemBtnSize = 50;
    }

    //bool playIcon = true;

    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        _SystemButton(type: 'reset'),
        _SystemButton(type: 'playnpause'),
      ],
    );
  }
}

class _SystemButton extends StatefulWidget {
  final type;
  const _SystemButton({Key key, this.type}) : super(key: key);

  @override
  _SystemButtonState createState() {
    return new _SystemButtonState();
  }

}



class _SystemButtonState extends State<_SystemButton> {

  Widget wIcon = Icon(Icons.grade);
  String _type;

  @override
  void didUpdateWidget(_SystemButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    _type = widget.type;
  }

  @override
  void initState() {
    super.initState();
    _type = widget.type;

    if (_type == 'reset') {
      wIcon = Icon(Icons.replay);
    } else if (_type == 'playnpause') {
      wIcon = Icon(Icons.play_arrow);
    }
  }




  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 15.0),
      child: Material(

        color: Colors.black,
        shape: CircleBorder(),
        child: Center(
          child: Ink(
            decoration: const ShapeDecoration(
              color: Colors.white12,
              shape: CircleBorder(),
            ),
            child: IconButton(
              icon: wIcon,
              color: Colors.white70,
              onPressed: () {
                if (_type == 'reset') {
                  reset();
                } else if (_type == 'playnpause') {
                  pauseOrResume();
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

Please help me to solve this issue.

Answer 1

Your must have to use setState() to update changes in your Ui. Change your code as:

setState(() 
    if (_type == 'reset') {
     wIcon = Icon(Icons.replay);
    } else if (_type == 'playnpause') {
      wIcon = Icon(Icons.play_arrow);
   }
) ;

Hopefully it will solve your problem

Answer 2

Hopefully I got your requirement correctly. Have a look at the below example that demonstrate a similar idea to yours:

class MusicPlayPage extends StatefulWidget {
  MusicPlayPage({Key key}) : super(key: key);

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

class _MusicPlayPageState extends State<MusicPlayPage> {
  String buttonLabel = 'Play/Pause';

  IconData buttonIcon;

  @override
  void initState() {
    super.initState();
    buttonIcon = Icons.play_circle_filled;
  }

  void toggleIcon() {
    if (buttonIcon == Icons.play_circle_filled) {
      setState(() {
        buttonIcon = Icons.pause_circle_filled;
      });
    } else {
      setState(() {
        buttonIcon = Icons.play_circle_filled;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Music Player")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          MaterialButton(
            onPressed: () {
              toggleIcon();
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(buttonIcon),
                SizedBox(
                  width: 12,
                ),
                Text(buttonLabel),
              ],
            ),
          ),
          SizedBox(
            height: 12,
          ),
          MaterialButton(
            onPressed: () {
              setState(() {
                buttonIcon = Icons.play_circle_filled;
              });
            },
            child: Text('Reset'),
          )
        ],
      ),
    );
  }
}