Update "Text" widget of "Column" on button press

Question

I have a main dart GridView as follows:

body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          GridView.count(crossAxisCount: 2, shrinkWrap: true, children: [
            BuildButtonWithText(Icons.volume_down, "Vol Down", "VOL_DN")
                .customButtonWithText(),
            BuildButtonWithText(Icons.volume_up, "Vol Up", "VOL_UP")
                .customButtonWithText(),
            BuildButtonWithText(Icons.play_arrow, "Play/Pause", "PLAY")
                .customButtonWithText(),
            BuildButtonWithText(Icons.volume_mute, "Mute", "VOL_MUTE")
                .customButtonWithText(),
          ]),
          TextField(controller: status_text),
        ],
      )),

The corresponding class that does the button creation is as follows:

class BuildButtonWithText {
  List<Column> _gridButtons = <Column>[];
  IconData _iconName;
  String _buttonText;
  String _buttonID;
  BuildButtonWithText(IconData iconName, String buttonText, String buttonID) {
    this._iconName = iconName;
    this._buttonText = buttonText;
    this._buttonID = buttonID;
  }

  String get _getButtonText {
    return this._buttonText;
  }

  String get _getButtonID {
    return this._buttonID;
  }

  set _setButtonText(String newButtonText) {
    this._buttonText = newButtonText;
  }

  void buttonPressHandler(String buttonID) {
    log('ButtonPressed: $buttonID');

    if (buttonID.compareTo("PLAY") == 0) {
      this._setButtonText = "PAUSE";
    }

    if (buttonID.compareTo("PAUSE") == 0) {
      this._setButtonText = "PLAY";
    }
  }

  Column customButtonWithText() {
    Column _button = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(this._iconName),
          onPressed: () {
            buttonPressHandler(this._buttonID);
          },
        ),
        Text(_buttonText)
      ],
    );
    _gridButtons.add(_button);
    return _button;
  }
}

Given that I am very new to Dart/Flutter, what I would like to do is,

in buttonPressHandler, search for a particular Column item from the _gridButtons list by the _buttonID value. I looked into the .firstWhere function, but I am unable to access that particular variable.
once I have a reference to said Column, I would like to modify the Text value as required.

The above code compiles and runs, but there appears to be no change in the text value.

score 0 · Accepted Answer · answered Mar 19 '21 at 04:16

I figured out I was going about it all wrong. I think here is the right way to approach this, any other alternatives are welcome.

Make a StatefulWidget class:

class ButtonWithText extends StatefulWidget {
  IconData _iconName;
  String _buttonTextStr;
  String _buttonID;
  List<Column> _gridButtons = <Column>[];
  ButtonWithText(iconName, buttonTextStr, buttonID) {
    this._iconName = iconName;
    this._buttonTextStr = buttonTextStr;
    this._buttonID = buttonID;
  }
   @override
  _ButtonWithTextState createState() => _ButtonWithTextState();
}

Make the corresponding State class to handle the logic:

class _ButtonWithTextState extends State<ButtonWithText> {
  @override
  Widget build(BuildContext context) {
    Column _button = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(widget._iconName),
          onPressed: () {
            buttonPressHandler(widget._buttonID);
          },
        ),
        Text(widget._buttonTextStr)
      ],
    );
    widget._gridButtons.add(_button);
    return _button;
  }

  void buttonPressHandler(String buttonID) {
    log('ButtonPressed: $buttonID');

    if (buttonID.compareTo("PLAY") == 0) {
      log("Pressed PLAY");
      setState(() {
        widget._buttonID = "PAUSE";
        widget._buttonTextStr = "Pause";
      });
    }

    if (buttonID.compareTo("PAUSE") == 0) {
      log("Pressed PAUSE");
      setState(() {
        widget._buttonID = "PLAY";
        widget._buttonTextStr = "Play";
      });
    }
  }
}

This now allows the state changing functionality I was looking for. Here are the links that helped me out:

Update "Text" widget of "Column" on button press

1 Answers1