Why Icon width is more then parent Container width?

user_11675243 0
Viewed 32

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: () {},
      ),
    );
  }
}

enter image description here

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

flutter-layout flutter
2 Answers

You can set iconSize to 0 too, like this:

Icon(
   Icons.info,
   size: 0,
)

or

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

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: () {},
    ),
  );
user_101571270
Related