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 👏.