How to display an image inside an overflowing stack, inside a container that has a Clipper ( ClipPath() )?

399 Views Asked by At

I'm not sure if I'm making sense but essentially, I want to have a full-sized image inside a container that has a clipper ( ClipPath() ). The image needs to overflow past both clippers. Here is what I was trying to achieve:

Image of a woman inside a
custom container whilst overflowing
My output/attempt of putting an
overflowing image inside a
custom clipper contanier
enter image description here enter image description here

Unfortunately, my method does not work as i get this error message:

Assertion failed: ..\…\widgets\basic.dart:920

clipBehavior != Clip.none

is not true

This is my code

Stack(
  children: [
    Positioned(
      bottom: size.height * .2,
      right: size.width * .1,
      child: ClipPath(
        clipBehavior: Clip.none,
        clipper: ContactFullTriangleClipper(),
        child: Container(
          color: Colors.teal,
          width: size.width * .3,
          height: size.height * .4,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(
                bottom: 0,
                child: Image.asset('/images/me/bottom.png',
                  height: size.height * .5,
                  fit: BoxFit.fitHeight),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
),

The error appears when both Stack's and ClipPaths's clipBehavior property is set to Clip.none. Please help, thanks!

0

There are 0 best solutions below