BubbleShowcase
BubbleShowcase copied to clipboard
BubbleShowcase doesn't work well with FittedBox
Describe the bug When I use BubbleShowcase with a RelaitveBubbleSlide with a key that identifies a widget inside a FittedBox, the shape is not displayed in correct size. It looks like the FittedBox's resizing is not taken into consideration.
To Reproduce Steps to reproduce the behavior:
- Use something like this in your app:
BubbleShowcase(...,
bubbleSlides: [RelativeBubbleSlide(
widgetKey: _resizedWidgetKey,
shape: Oval(),
child: MyRelativeBubbleSlideChild(...)
)],
child: ...(FittedBox(child: ...(Text('Hello', key: _resizedWidgetKey))))
- Run the app and let the slides show.
- See that the oval shape displays wrongly sized (and the slide child is wrongly positioned).
Expected behavior The FittedBox should affect the size of the slide shape.
For myself, I have fixed this by creating a subclass of RelativeBubbleSlide that converts not only the top left corner from local to global coordinates, but the bottom right as well. The code looks like this:
Position getHighlightPosition(BuildContext context, BubbleShowcase bubbleShowcase, int currentSlideIndex) {
RenderBox renderBox = widgetKey.currentContext.findRenderObject() as RenderBox;
Offset offset = renderBox.localToGlobal(Offset.zero);
Offset bottomRight = renderBox.localToGlobal(renderBox.size.bottomRight(Offset.zero)); // convert the bottom right corner from local to global coordinates
return Position(
top: offset.dy,
right: bottomRight.dx, // instead of adding the local size to the global offset use the global coordinates of bottom right corner
bottom: bottomRight.dy, // instead of adding the local size to the global offset use the global coordinates of bottom right corner
left: offset.dx,
);
}