I'm using a shadermask for a page transition:
transitionsBuilder: (context, animation, secondaryAnimation, child) => TweenAnimationBuilder(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 1000),
curve: Curves.easeIn,
child: child,
builder: (BuildContext context, double value, Widget? child)
{
return ShaderMask(
child: child,
shaderCallback: (rect)
{
return RadialGradient(
colors: [Colors.white, Colors.white, Colors.transparent, Colors.transparent],
stops: [0.0, 0.25, 0.6, 1.0],
center: FractionalOffset(.5, .5),
radius: value * 5,
).createShader(rect);
}
);
},
)
I'd like to know if it is possible to create the shader for a SVG image. This is a sample SVG with 2 colors. The inner white circle should be the opening to the new page. Just like the radial gradient above, the SVG should get bigger until the inner white circle fills the entire page. (a blue circle/ring expanding)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
<circle r="100" fill="blue" />
<circle r="50" fill="white" />
</svg>
I've tried ImageShader(). To get the Svg into image info object:
Future<void> getImageShader(int width, int height) async
{
final completer = Completer<ImageInfo>();
ResizeImage(***my svg provider object ***, width: width, height: height)
.resolve(ImageConfiguration(size: Size(width.toDouble(), height.toDouble())))
.addListener(ImageStreamListener((info, _) => completer.complete(info)));
final info = await completer.future;
return ImageShader(
info.image,
TileMode.clamp,
TileMode.clamp,
Float64List.fromList(Matrix4.identity().storage),
);
}
That's where I'm stuck. getImageShader is async and for each frame of transitionsBuilder I think it needs to repaint the image. Can't use that function inside ShaderMask callback function.
- provided SVG is a sample and it could be more complicated
- Trying this for desktop apps.