Why Icon width is more then parent Container width?-CodePudding

I have a container with IconButton inside it. Then I set width of this container to .0. I see the Icon.

class Test extends StatelessWidget{
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: .0,
      color: Colors.black26,
      child: IconButton(
        icon: const Icon(Icons.info),
        onPressed: () {},
      ),
    );
  }
}

Why the Icon not hide, and how can I hide the Icon then the parent Container have width = 0.

CodePudding user response：

Firstly, the default clipBehavior of container is none.

The clip behavior when Container.decoration is not null. Defaults to Clip.none. Must be Clip.none if decoration is null.

Secondly, The default icon Size is 24. That's why you get it visible even the container size is 0.

You can change the clipBehavior of container.

return Container(
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(
      color: Colors.black26,
    ),
    width: .0,
    child: IconButton(
      icon: const Icon(Icons.info),
      onPressed: () {},
    ),
  );

CodePudding user response：

You can set iconSize to 0 too, like this:

Icon(
   Icons.info,
   size: 0,
)

Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                color: Colors.black26,
              ),
              width: .0,
              child: IconButton(
                icon: const Icon(
                  Icons.info,
                ),
                onPressed: () {},
              ),
            )