CODEWITHSUNDEEP
flutterdart
RanAB
RanAB

Reputation: 417

Centering icon in custom checkbox

So I had to write my own checkbox due to the limitations the existing one has, I needed 3 states with a bit of logic in it.

I am trying to get the icon centered in the container with no success, it only centers when I use the optimal size I guess for the IconButton which is 45, and that IconButton is too large for my needs. here is the code :

  Widget build(BuildContext context) {
    return Container(
      height: 25,
      width: 25,
      color: widget.status == Constants.Rejected
          ? Colors.red
          : widget.status == Constants.Done ? Colors.green : Colors.white,
      child: IconButton(
        icon: widget.status == Constants.Rejected
            ? Icon(
                Icons.close,
                color: Colors.white,
              )
            : widget.status == Constants.Done
                ? Icon(
                    Icons.check,
                    color: Colors.white,
                  )
                : Container(),
        onPressed: _changeState,
      ),
    );
  }

And here is the result :

Resulted checkboxes

This is how it outcomes when I use height and width of 45:

enter image description here

Thanks!

Upvotes: 0

Views: 2280

Answers (2)

Sanjayrajsinh
Sanjayrajsinh

Reputation: 17128

You want to set padding: EdgeInsets.all(0) in IconButton widget

just because of by default set padding so you need to remove that padding

Container(
        height: 25,
        width: 25,
        color: Colors.red,
          child: IconButton(
            padding: EdgeInsets.all(0), // here is set 0 padding
            icon: Icon(Icons.close, color: Colors.white),
            onPressed: () {},

        ));

Upvotes: 0

user10539074
user10539074

Reputation:

add padding: const EdgeInsets.all(0), into IconButton

or use GestureDetector with child Icon instead og Button because Button has paddings

  Widget build(BuildContext context) {
    return Container(
      height: 25,
      width: 25,
      color: widget.status == Constants.Rejected
          ? Colors.red
          : widget.status == Constants.Done ? Colors.green : Colors.white,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: widget.status == Constants.Rejected
            ? Icon(Icons.close, color: Colors.white)
            : widget.status == Constants.Done ? Icon(Icons.check, color: Colors.white) : Container(),
        onTap: (){
          // 
        },
      ),
    );
  }

as for me, GestureDetector is a better option because it hasn't Splash animation like button

Upvotes: 1

Related Questions