Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BubbleShowcase cannot exceed highlighted widget's dimensions #16

Closed
Termtime opened this issue Sep 17, 2021 · 2 comments · May be fixed by #19
Closed

BubbleShowcase cannot exceed highlighted widget's dimensions #16

Termtime opened this issue Sep 17, 2021 · 2 comments · May be fixed by #19
Assignees
Labels
bug Something isn't working

Comments

@Termtime
Copy link
Contributor

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
@Termtime Termtime added the bug Something isn't working label Sep 17, 2021
@Termtime
Copy link
Contributor Author

Termtime commented Sep 17, 2021

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

@janhaa
Copy link

janhaa commented Nov 8, 2021

@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 !',
              ),
            ],
          ),
        ),
      )),
    ),
  ),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants