Flutter ShowCaseView package

ShowCaseView is an elegant and simple package. It let’s you use an informative tooltip to help your users identify different features of your application and app on-boarding. The basic use of the package consists of a target element passed as input which will be highlighted over a translucent background and pointed out by a tooltip. Even you can pass your custom widget in ShowCaseView.

How to use this Package

• How to get this package
  You can get this package called showcaseview from pub.dev.
• Add the dependency in your pubspec.yaml file.

dependencies:
    showcaseview: 0.1.0

You can get latest version of package by going at the ‘Installing’ tab on pub.dev.

• Importing package

import 'package:showcaseview/showcaseview.dart';

• Adding a ShowCaseWidget widget.

You need to wrap your class with ShowCaseWidget where ShowCase will be used.

ShowCaseWidget(
  builder: Builder(
    builder : (context) ()=> Somewidget()
  ),
),

• Adding a ShowCase widget.

Now you need to use a key to uniquely identify your child widget. and then use the ShowCase widget with key and child.

GlobalKey _one = GlobalKey();
GlobalKey _two = GlobalKey();
GlobalKey _three = GlobalKey();

...

ShowCase(
  key: _one,
  title: 'Menu',
  description: 'Click here to see menu options',
  child: Icon(
    Icons.menu,
    color: Colors.black45,
  ),
),

• Some more optional parameters.

There are many optional parameters you can explore and experiment.

ShowCase(
  key: _two,
  title: 'Profile',
  description: 'Click here to go to your Profile',
  shapeBorder: CircleBorder(),
  showArrow: false,
  slideDuration: Duration(milliseconds: 1500),
  tooltipColor: Colors.blueGrey,
  child: ...,
),

• Using a ShowCase.withWidget widget.

You can even pass your own widget for a showcase, for it, you need to pass the height and width of your tooltip widget.

ShowCase.withWidget(
  key: _three,
  cHeight: 80,
  cWidth: 140,
  shapeBorder: CircleBorder(),
  container: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      ...
    ],
  ),
  child: ...,
),

• Starting the ShowCase .

You can start showcase with startShowcase method.

someEvent(){
    ShowCaseWidget.startShowCase(context, [_one, _two, _three]);
}

If you want to start the ShowCase as soon as your UI built up then use below code.

WidgetsBinding.instance.addPostFrameCallback((_) =>
        ShowCaseWidget.startShowCase(context, [_one, _two, _three]));

You can check out the fully working example on our GitHub Repository.

If you are facing any bugs/issue or want any feature then feel free to create an issue on GitHub.

If this article and package helps you then please show some love by staring ⭐️ our package and giving a few claps 👏.