I have this code I need to select only one option from the three buttons "Monthly, Quarterly and Yearly" and when selecting one, block the other two.

I have searched but I only find how to block the button that I just selected and I need to block the ones that are not selected.

these are the variables that I use to make it change color when selected.

bool pressMensual = false;
bool pressTrimes = false;
bool pressAnual = false;
bool _isPressed = false;



Container(
 padding: EdgeInsets.symmetric(horizontal: 2.0),
 child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
   Container(
    padding: EdgeInsets.only(left: 10.0, right: 10.0),
    child: Column(
     children: [
      Text('PERIODO'),
      Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: <Widget>[
        Padding(
         padding: const EdgeInsets.all(3.0),
         child: RaisedButton(
          shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(10.0)
          ),
          child: Text('MENSUAL'),
          color:  pressMensual ? Colors.blue[100] : Color(0xFF94D500),
          onPressed: () {
           _isPressed = true;
           setState(() {
            pressMensual = !pressMensual;
           });
          },
         ),
        ),
        RaisedButton(
         shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0)
         ),
         color: pressTrimes ? Colors.blue[100]  : Color(0xFF94D500),
         child: Text('TRIMESTRAL'),         
         onPressed: () {
            setState(() {
             pressTrimes = !pressTrimes;
            });
         },
        ),
        RaisedButton(
         shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0)
         ),
         color: pressAnual ? Colors.blue[100] : Color(0xFF94D500),
         child: Text('ANUAL'),                        
          onPressed: () {
           setState(() {
            pressAnual = !pressAnual;
           });
          },
         ),
       ],
      ),
     ],
    ),
   );

CodePudding user response：

Try this way while others two will be false. We like to set true on pressed button and make others false. In order to archive that, we need to update three values inside setState to update the UI.

  setState(() {
             pressMensual = true; // because `Mensual` is pressed here
             pressTrimes = false;
              pressAnual = false;
              });

To lock the press Functionality

Here we can pass null to prevent the tap-event of RaisedButton like onPressed:null. In that case we need to include another variable the way you did, or you can check those three bool variables.

Using _isPressed bool will be

           onPressed: _isPressed
                          ? null
                         : () {
                             setState(() {
                                  pressMensual = false;
                                  pressTrimes = true;
                                  pressAnual = false;
                                  _isPressed = true;
                                });
                              },

Or you can just do like and avoid using another bool.

          onPressed: pressMensual || pressTrimes || pressAnual
                            ? null
                            : () {
                                setState(() {
                                  pressMensual = false;
                                  pressTrimes = true;
                                  pressAnual = false;
                                });
                              },

Using null will/can lose your style functionality in that case instead of passing null to onPressed pass empty function like

                        onPressed: _isPressed
                            ? () {}
                            : () {
                                setState(() {
                                  pressMensual = false;
                                  pressTrimes = false;
                                  pressAnual = true;
                                  _isPressed = true;
                                });
                              },

Full Widget

 
class _TestWState extends State<STD> {
  bool pressMensual = false;
  bool pressTrimes = false;
  bool pressAnual = false;
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 2.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(left: 10.0, right: 10.0),
              child: Column(
                children: [
                  Text('PERIODO'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(3.0),
                        child: RaisedButton(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          child: Text('MENSUAL'),
                          color: pressMensual
                              ? Colors.blue[100]
                              : Color(0xFF94D500),
                          onPressed: _isPressed
                              ? null //* will loss style
                              : () {
                                  setState(() {
                                    pressMensual = true;
                                    pressTrimes = false;
                                    pressAnual = false;
                                    _isPressed = true;
                                  });
                                },
                        ),
                      ),
                      RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0)),
                        color:
                            pressTrimes ? Colors.blue[100] : Color(0xFF94D500),
                        child: Text('TRIMESTRAL'),
                        onPressed: pressMensual || pressTrimes || pressAnual //* without using separate variable
                            ? () {}
                            : () {
                                setState(() {
                                  pressMensual = false;
                                  pressTrimes = true;
                                  pressAnual = false;
                                  _isPressed = true;
                                });
                              },
                      ),
                      RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0)),
                        color:
                            pressAnual ? Colors.blue[100] : Color(0xFF94D500),
                        child: Text('ANUAL'),
                        onPressed: _isPressed
                            ? () {}
                            : () {
                                setState(() {
                                  pressMensual = false;
                                  pressTrimes = false;
                                  pressAnual = true;
                                  _isPressed = true;
                                });
                              },
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}