Flutter: Icon widget's background color to white

Question

I have an Icon widget

 GestureDetector(
  onTap: () => Get.back(),
  // color: Colors.white,
  child: Icon(
    Icons.cancel_rounded,
    color: Colors.red,
    size: 50,
  ),
)

I am trying to give a background color of white. So that it has a clear button. I could not find any but wrapping this with the container.

Container(
    height: 50,
    width: 50,
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius:
            BorderRadius.all(Radius.circular(40))),
    child: GestureDetector(
      onTap: () => Get.back(),
      // color: Colors.white,
      child: Icon(
        Icons.cancel_rounded,
        color: Colors.red,
        size: 50,
      ),
    ),
  ),

The problem is that this will have an edge that exceeds the size of the icon widget. If I decrease the size of the container, the icon widget gets popped out of the container. How can Icon widget have the background color without any oversized Container?

Answer 1

Since the Icons.cancel_rounded has a transparent border that takes some place (hard to calculate), so you are facing the problem above. To solve the problem (without importing a customized icon which is not with a transparent border), we have to control the background scope carefully.

What we should do is limit the length & height of the background rounded rectangle to a number that is not lower than the length of the inner x , and also not bigger than the diameter of the part of the icon which is not transparent.

For the given icon size of 50, a reasonable length & height of the background rounded rectangle is 40.

And below is the demo.

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Photos'),
          backgroundColor: Colors.deepPurpleAccent,
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: on_Clicked,
          child: new Icon(Icons.add),
        ),
        backgroundColor: Colors.blue,
        body: Center(
          child: Container(
            height: 50,
            width: 50,
            child: Stack(children: [
              Positioned.fill(
                  child: Align(
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                ),
                alignment: Alignment.center,
              )),
              Positioned.fill(
                child: Icon(
                  Icons.cancel_rounded,
                  color: Colors.red,
                  size: 50,
                ),
              )
            ]),
          ),
        ));
  }

At last, I would suggest you use an icon without a transparent border which leads to the inconvenience we met above.