Use ShowCaseView package in flutter

A simple and elegant package called ShowCaseView. It enables you to utilise an educational tooltip to guide users through your app’s on-boarding process and help them understand its various capabilities. The target element must be supplied as input in order for the package to function, and it will then be highlighted against a transparent backdrop and identified by a tooltip. You can even feed your own unique widget into ShowCaseView.

Use of this Package

This showcaseview package is available from pub.dev.
Your pubspec.yaml file should have the dependency added.

dependencies:
  showcaseview: ^2.0.0

Implement ShowCaseWidget

Where ShowCase will be utilised, your class needs to be wrapped with ShowCaseWidget.

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

ShowCase widget

Your child widget must now be uniquely identified using a key. utilise the ShowCase widget with a key and child after that.

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

ShowCase(
  key: _one,
  title: 'Home',
  description: 'Click here to see Home',
  child: Icon(
    Icons.home,
    color: Colors.blue,
  ),
),

You can experiment with a variety of possible parameters.

ShowCase(
  key: _one,
  title: 'Home',
  description: 'Click here to go to Home',
  shapeBorder: CircleBorder(),
  showArrow: false,
  slideDuration: Duration(milliseconds: 1500),
  tooltipColor: Colors.blue,
),

Starting the ShowCase

With the startShowcase method, you can launch a showcase.

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

Use the following code if you want to start the ShowCase as soon as your UI is ready.

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