Conditionally make wideget appear using `Visibility` and List<String>-CodePudding

I'm trying to make the SizedBox conditionally appear if the buttonType returns Half. But it throws an error.

Error: Equality operator ``==`` invocation with references of unrelated types.

const List<String>  buttonTypeList = ['FullButton','Half','Quarter'];

class ToolSetButton extends StatefulWidget {

final List buttonType;

const ToolSetButton(
{Key? key,this.buttonType = buttonTypeList})


Visibility(
                      //visible: false,
                      visible: widget.buttonType == 'Half' 
                          ? false
                          : true,
         child: SizedBox();

CodePudding user response：

The error relies on the fact that buttonType is being declared as a List<String>, while the == operator is comparing it to a String (specifically 'Half').

To solve our issue we can use the following widget:

class ToolSetButton extends StatefulWidget {
  const ToolSetButton({Key? key, required this.buttonType}) : super(key: key);

  final String buttonType;

  @override
  State<ToolSetButton> createState() => _ToolSetButtonState();
}

class _ToolSetButtonState extends State<ToolSetButton> {

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: widget.buttonType == 'Half' 
                           ? false
                           : true,
      child: SizedBox(),
    );
  }
}

However, a much better and elegant solution, would be to use enum in our case:

enum ButtonSize {
  Full,
  Half,
  Quarter,
}

class ToolSetButton extends StatefulWidget {
  const ToolSetButton({Key? key, required this.buttonSize}) : super(key: key);

  final ButtonSize buttonSize;

  @override
  State<ToolSetButton> createState() => _ToolSetButtonState();
}

class _ToolSetButtonState extends State<ToolSetButton> {

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: widget.buttonSize == ButtonSize.Half
                           ? false
                           : true,
      child: SizedBox(),
    );
  }
}