A powerful flutter package that allows you to highlight specific parts

bubbleshowcase

bubbleshowcase is a small but powerful flutter package that allows you to highlight specific parts of your app (to explain them to the user for instance) or to showcase your app new features.

getting started to highlight parts

this package is easy to use.
take a look at the following snippet (which is using speech_bubble) :

bubbleshowcase(
  bubbleshowcaseid: 'my_bubble_showcase',
  bubbleshowcaseversion: 1,
  bubbleslides: [
    relativebubbleslide(
      widgetkey: widgettohighlightkey,
      child: relativebubbleslidechild(
        direction: axisdirection.right,
        widget: speechbubble(
          niplocation: niplocation.left,
          color: colors.blue,
          child: padding(
            padding: edgeinsets.all(10),
            child: text(
              'this is a new cool feature !',
              style: textstyle(color: colors.white),
            ),
          ),
        ),
      ),
    ),
  ],
  child: mymainwidget(),
);

it creates a bubbleshowcase widget with only one bubbleslide.
this slide will highlight the widget that holds the key widgettohighlightkey.
the speech bubble will be placed on the right of the widget.

bubbleshowcase is not limited to highlight a specific widget. you can also highlight a specific part of your app by its coordinates :

bubbleshowcase(
  bubbleshowcaseid: 'my_bubble_showcase',
  bubbleshowcaseversion: 1,
  bubbleslides: [
    absolutebubbleslide(
      positioncalculator: (size) => position(
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      ),
      child: absolutebubbleslidechild(
        positioncalculator: (size) => position(
          top: 0,
          left: 0,
        ),
        widget: speechbubble(
          niplocation: niplocation.left,
          color: colors.blue,
          child: padding(
            padding: edgeinsets.all(10),
            child: text(
              'this is the top left corner of your app.',
              style: textstyle(color: colors.white),
            ),
          ),
        ),
      ),
    ),
  ],
  child: mymainwidget(),
);

this will display the speech bubble on the top left corner of your app.

options

the showcase

the showcase is where everything begins. let’s see the available options :

• bubbleshowcaseid the showcase identifier. must be unique across the app as it is used as a saving mean; for instance when the showcase should not be reopened (required).
• bubbleshowcaseversion the showcase version. increase it when you update the showcase, this allows to redisplay the it to the user if donotreopenonclose is set to true (required).
• donotreopenonclose whether this showcase should be reopened once closed.
• bubbleslides the slides to display (required & must not be empty).
• child the widget to display below the slides. it should be your app main widget.
• countertext the current slide counter text. :i targets the current slide number and :n targets the maximum slide number.
• showclosebutton whether to show a little close button on the top left of the slide.

the slides

the slides is what is highlighting a specific part of your app.
there are two main categories of positioning : absolute and relative. here is a little summary :

all slides have these options in common :

• shape the slide shape (available are rectangle, roundedrectangle, oval and circle but you can add a custom one by extending the shape class).
• boxshadow the slide box shadow (containing the color, the blur radius, the spread radius, …).
• child the slide child, see below (required).

the slides children

slides children are what are displayed according to what you are highlighting (it can be a speech bubble for example).
the same positioning system is also available for children :

all children have these options in common :

• widget the widget to display (required).

but you have a lot of other options !
don’t hesitate to check the api reference or the github repo.