Flutter package allows you to Showcase your widgets step by step

showcaseview

flutter plugin that allows you to show case your features on ios and android.

installing

1. add dependency to pubspec.yaml

   get the latest version in the ‘installing’ tab on pub.dev

dependencies:
    show caseview: ^0.1.1

2. import the package

import 'package:show caseview/showc aseview.dart';

3. adding a show casewidget widget.

show casewidget(
  child: somewidget(),
),

4. adding a show case widget.

globalkey _one = globalkey();
globalkey _two = globalkey();
globalkey _three = globalkey();

...

show case(
  key: _one,
  title: 'menu',
  description: 'click here to see menu options',
  child: icon(
    icons.menu,
    color: colors.black45,
  ),
),

some more optional parameters

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: ...,
),

5. using a show case.withwidget widget.

showcase.withwidget(
  key: _three,
  cheight: 80,
  cwidth: 140,
  shapeborder: circleborder(),
  container: column(
    crossaxisalignment: crossaxisalignment.start,
    children: <widget>[
      ...
    ],
  ),
  child: ...,
),

6. starting the show case

someevent(){
    showcasewidget.startshow case(context, [_one, _two, _three]);
}

if you want to start the show caseview as soon as your ui built up then use below code.

widgetsbinding.instance.addpostframecallback((_) =>
        show casewidget.startshow case(context, [_one, _two, _three]));

how to use

check out the example app in the example directory or the ‘example’ tab on pub.dartlang.org for a more complete example.