Skyost / BubbleShowcase

BubbleShowcase is a small but power flutter package that allows you to highlight specific parts of your app to explain them to the user or to showcase your app new features.

Home Page:https://pub.dev/packages/bubble_showcase

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

BubbleShowcase cannot exceed highlighted widget's dimensions

Termtime opened this issue · comments

Describe the bug
If you set a RelativeBubbleSlide to be on a horizontal axis (AxisDirection.right or AxisDirection.left) the BubbleShowcase widget will at maximum be of the height of the widget and cannot exceed it.
If you set it to a vertical axis (AxisDirection.up or AxisDirection.down) the same happens but with the width of the RelativeBubbleSlide.

To Reproduce
Steps to reproduce the behavior:

  1. In a Scaffold, create a small widget, for example an IconButton
  2. Add a RelativeBubbleSlide that focuses on the key of the IconButton, the structure of the BubbleSlides follows the structure of the BubbleSlide _firstSlide in the example.dart file of this package.
  3. Set the RelativeBubbleSlide direction to be a horizontal axis.
  4. See how the container overflows from the text not being able to fit in the small height of the IconButton
  5. Set the RelativeBubbleSlide direction to be a vertical axis.
  6. See how the container overflows vertically from the text not being able to fit in the small width of the IconButton

Expected behavior
You should be able to go beyond the width/height of the widget you are highlighting.

Screenshots
image
image

Smartphone (please complete the following information):

  • Device: Pixel 2
  • OS: Android API 29
  • Flutter version: 2.2.3
  • bubble_showcase version: ^1.0.0

I think #11 is related and might solve this issue, but it is highly outdated

commented

@Termtime thank you for working on a fix!

I figured out that using OverflowBox is a temporary workaround solution for this issue, e.g.:

RelativeBubbleSlide(
  widgetKey: widgetToHighlightKey,
  child: RelativeBubbleSlideChild(
    direction: AxisDirection.up,
    widget: OverflowBox(maxWidth: 300, alignment: Alignment.centerLeft, child: Padding(
      padding: const EdgeInsets.only(top: 8),
      child: SpeechBubble(
        nipLocation: NipLocation.BOTTOM_LEFT,
        color: Colors.blue,
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'That\'s cool !',
              ),
              Text(
                'This is my brand new title !',
              ),
            ],
          ),
        ),
      )),
    ),
  ),