how to enable ui interaction with visible components behind a canvas? - dart

Question

I'm writing a flutter application and I'm trying to create a tutorial overlay, that will fully show only components that I want the user to be able to interact with.
so I extended CustomPainter class, while getting the Page's context (to get his dimensions) and a list of GlobalKeys (for elements that I want to display and to interact with)
Color colorBlack = Colors.black.withOpacity(0.4);
class CurvePainter extends CustomPainter{
BuildContext context;
List<GlobalKey> globalKeys;
double padding;
#override
void paint(Canvas canvas, Size size) {
final double screenWidth = MediaQuery.of(context).size.width;
final double screenHeight = MediaQuery.of(context).size.height;
Path path = Path()..addRect(Rect.fromLTWH(0, 0, screenWidth, screenHeight));
Set<GlobalKey> keysSet = Set.from(globalKeys);
keysSet.forEach((element){
final List<double> vals = global_key_util.getArea(element);
path = Path.combine(PathOperation.difference,
path,
Path()
..addOval(Rect.fromLTWH(vals[0]-(padding/2),vals[1]-padding/2,vals[2]+padding,vals[3]+padding)));
});
canvas.drawPath(path,
Paint()..color = colorBlack);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
CurvePainter({this.context,this.globalKeys,this.padding=4});
}
so far so good... the button that I want the user to interact with is fully visible, in the initState() of my page I create the overlay and show it.
the problem is that I can't interact with that button!
how can I resolve this ?
thanks

Answer 1

so.. the answer is simply not to use CustomPainter, to use ClipPath with CustomClipper.
in my case I wanted to detect when the user is clicking on the overflow, but to also allow him to interact with the visible widgets behind it.
so I created an InvertedClipper class that extends CustomClipper:
import 'package:flutter/material.dart';
import 'package:collection/collection.dart';
import 'HoleArea.dart';
import 'WidgetData.dart';
class InvertedClipper extends CustomClipper<Path> {
final Animation<double> animation;
final List<WidgetData> widgetsData;
double padding;
Function deepEq = const DeepCollectionEquality().equals;
List<HoleArea> areas = [];
InvertedClipper({#required this.padding, this.animation, Listenable reclip,
this.widgetsData}) : super(reclip: reclip) {
if (widgetsData.isNotEmpty) {
widgetsData.forEach((WidgetData widgetData) {
if (widgetData.isEnabled) {
final GlobalKey key = widgetData.key;
if (key == null) {
// throw new Exception("GlobalKey is null!");
} else if (key.currentWidget == null) {
// throw new Exception("GlobalKey is not assigned to a Widget!");
} else {
areas.add(getHoleArea(key: key,shape: widgetData.shape,padding: widgetData.padding));
}
}
});
}
}
#override
Path getClip(Size size) {
Path path = Path();
double animationValue = animation != null ? animation.value : 0;
areas.forEach((HoleArea area) {
switch (area.shape) {
case WidgetShape.Oval: {
path.addOval(Rect.fromLTWH(area.x - (((area.padding + padding) + animationValue*15) / 2), area.y - ((area.padding + padding) + animationValue*15) / 2,
area.width + ((area.padding + padding) + animationValue*15), area.height + ((area.padding + padding) + animationValue*15)));
}
break;
case WidgetShape.Rect: {
path.addRect(Rect.fromLTWH(area.x - (((area.padding + padding) + animationValue*15) / 2), area.y - ((area.padding + padding) + animationValue*15) / 2,
area.width + ((area.padding + padding) + animationValue*15), area.height + ((area.padding + padding) + animationValue*15)));
}
break;
case WidgetShape.RRect: {
path.addRRect(RRect.fromRectAndCorners(Rect.fromLTWH(area.x - (((area.padding + padding) + animationValue*15) / 2), area.y - ((area.padding + padding) + animationValue*15) / 2,
area.width + ((area.padding + padding) + animationValue*15), area.height + ((area.padding + padding) + animationValue*15)),
topLeft: Radius.circular(5.0),
topRight: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0)));
}
break;
}
});
return path
..addRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
..fillType = PathFillType.evenOdd;
}
#override
bool shouldReclip(InvertedClipper oldClipper) {
return !deepEq(oldClipper.areas, areas);
}
}
and I configure a GestureDetector before that to detect when user is clicking on overlay:
return GestureDetector(
onTap: onTap,
child: ClipPath(
clipper: InvertedClipper(
padding: defaultPadding,
animation: animation,
reclip: animationController,
widgetsData: widgetsData),
...