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 .

You can get this package called from . 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 👏.