Flutter: How to use an image to reveal and hide content behind it?

89 Views Asked by At

I am attempting to create a reveal animation on flutter using an image that has transparent pixels as the shape on top, below is another image which will be hidden by the transparent image and can only be seen on the parts where they do not over lap. I have come close but I have run into an issue were the transparent image gets rendered as black in the screen. Below I've included the effect I'm trying to recreate as well as the code that has gotten me halfway there. I've tried using WidgetMask but I may not be using it correctly.

Effect im trying to recreate

WidgetMask(

  blendMode: BlendMode.dstOut,
  mask: Stack(
                  children: [Positioned(
                      top: y,
                      left: 0,
                      child:Image.asset(
                            mask,
                            width: 272,
                            height: 1024,
                            fit: BoxFit.fill,
                            colorBlendMode: BlendMode.clear,

                          ),),],),
  child: Image.asset(assetPath),
),
0

There are 0 best solutions below