Flutter : ClipBehavior

Sometimes, if the design is required, some widgets needs to be fit inside the parent widget like the painting inside a frame. If the image is larger than the frame, it's cut out and fitted inside the frame. On flutter, if the widget is too big and overflows from the parent widget, it sometimes needs to be fitted inside the parent frame.

Container(
  decoration: const BoxDecoration(color: Colors.white),
  clipBehavior: Clip.hardEdge, //cuts the overflowing widgets
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Transform.translate(
      offset: const Offset(20, 30),
      child: Transform.scale(
        scale: 1,
        child: const Icon(
          Icons.cloud,
          color: Colors.blue,
          size: 100,
        ),
      ),
    ),
  ),
),

How to do it is to use 'clipBehavior'. By default, the transformed icon will be sticking outside of the container that's holding it. But if the 'clipBehavior' is applied and is set to 'hardEdge', the overflowing part of the icon will be cut out.

From this(Clip.none)

To this(Clip.hardEdge)