Deselect a button when another button is selected

Question

I create a custom button that changes it's Image and Text color based on the bool pressAttention parameter.

class UserButton extends StatefulWidget {
  final String unselectedImagePath;
  final String selectedImagePath;
  final String text;

  UserButton({
    this.unselectedImagePath, 
    this.selectedImagePath, 
    this.text,
    });

  @override
  State<StatefulWidget> createState() => _UserButtonState();
}

class _UserButtonState extends State<UserButton> {
  bool pressAttention = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Ink.image(
          image: pressAttention
              ? AssetImage(widget.selectedImagePath)
              : AssetImage(widget.unselectedImagePath),
          fit: BoxFit.cover,
          width: 150.0,
          height: 150.0,
          child: InkWell(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
            onTap: () {
              setState(() {
                pressAttention = !pressAttention;
              });
            },
          ),
        ),
        Padding(
          padding: EdgeInsets.only(top: 30.0),
          child: Text(
            widget.text,
            style: TextStyle(
              color: pressAttention
                  ? Theme.of(context).accentColor
                  : Colors.white,
              fontFamily: "Roboto",
              fontSize: 18.0
            ),
          ),
        )
      ],
    );
  }
}

And then inflated them in my main class like this:

Padding(
            padding: EdgeInsets.only(top: 100.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                UserButton(
                  selectedImagePath: 'assets/whistle_orange.png',
                  unselectedImagePath: 'assets/whistle.png',
                  text: "Coach",
                ),
                Container(width: 30.0,),
                UserButton(
                  selectedImagePath: 'assets/weight_orange.png',
                  unselectedImagePath: 'assets/weight.png',
                  text: "Student",
                )
              ],
            ),
          ),

While the two buttons are working correctly by themselves I need to disable the first one (change the pressAttention and call setState()) and viceversa.

How can I achieve that?

score 2 · Accepted Answer · answered Oct 21 '18 at 19:44

You could handle the state from the parent widget and pass it to your children , This is an example how you can achieve that, of course you can improve the code and maybe create your own 'parent' controller of buttons :

    class UserButton extends StatefulWidget {
      final String unselectedImagePath;
      final String selectedImagePath;
      final String text;
      final VoidCallback onTap;
      final bool selected;

      UserButton({
        this.unselectedImagePath,
        this.selectedImagePath,
        this.text,
        this.selected,
        this.onTap,
      });

      @override
      State<StatefulWidget> createState() => _UserButtonState();
    }

    class _UserButtonState extends State<UserButton> {
      bool pressAttention = false;

      @override
      Widget build(BuildContext context) {
        pressAttention = widget.selected;
        return Column(
          children: <Widget>[
            Ink.image(
              image: pressAttention
                  ? AssetImage(widget.selectedImagePath)
                  : AssetImage(widget.unselectedImagePath),
              fit: BoxFit.cover,
              width: 150.0,
              height: 150.0,
              child: InkWell(
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
                onTap: () {
                  setState(() {
                    pressAttention = !pressAttention;
                  });
                  if (widget.onTap != null) widget.onTap();
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 30.0),
              child: Text(
                widget.text,
                style: TextStyle(
                    color: pressAttention
                        ? Theme.of(context).accentColor
                        : Colors.white,
                    fontFamily: "Roboto",
                    fontSize: 18.0),
              ),
            )
          ],
        );
      }
    }

    class ParentMain extends StatefulWidget {
      @override
      _ParentMainState createState() => _ParentMainState();
    }

    class _ParentMainState extends State<ParentMain> {
      bool selectedButtonCoach = false;
      bool selectedButtonStudent = false;

      @override
      Widget build(BuildContext context) {
        return Container(
          child: Padding(
            padding: EdgeInsets.only(top: 100.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                UserButton(
                  selectedImagePath: 'assets/whistle_orange.png',
                  unselectedImagePath: 'assets/whistle.png',
                  text: "Coach",
                  selected: selectedButtonCoach,
                  onTap: () {
                    setState(() {
                      selectedButtonCoach = true;
                      selectedButtonStudent = false;
                    });
                  },
                ),
                Container(
                  width: 30.0,
                ),
                UserButton(
                  selectedImagePath: 'assets/weight_orange.png',
                  unselectedImagePath: 'assets/weight.png',
                  text: "Student",
                  selected: selectedButtonStudent,
                  onTap: () {
                    setState(() {
                      selectedButtonCoach = false;
                      selectedButtonStudent = true;
                    });
                  },
                )
              ],
            ),
          ),
        );
      }
    }

Take a look how Radio widget works : https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart

https://docs.flutter.io/flutter/material/Radio-class.html

Deselect a button when another button is selected

1 Answers1