ShowCaseView

A Flutter package allows you to Showcase/Highlight your widgets step by step.

It is inspired from Fluttery’s Flutter challenge.

Preview

Installing

1. Add dependency to pubspec.yamlGet the latest version in the ‘Installing’ tab on pub.dev

dependencies:
    showcaseview: <latest-version>

2. Import the package

import 'package:showcaseview/showcaseview.dart';

3. Adding a ShowCaseWidget widget.

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

4. Adding a Showcase widget.

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

Showcase(
  key: _two,
  title: 'Profile',
  description: 'Click here to go to your Profile',
  disableAnimation: true,
  shapeBorder: CircleBorder(),
  showArrow: false,
  overlayPadding: EdgeInsets.all(5),
  slideDuration: Duration(milliseconds: 1500),
  tooltipColor: Colors.blueGrey,
  child: ...,
),

5. Using a Showcase.withWidget widget.

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

6. Starting the ShowCase

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

7. onFinish method for ShowCase

ShowCaseWidget(
  onFinish: () {
    // Your code goes here
  },
  builder: Builder(
    builder : (context) ()=> Somewidget()
  ),
),

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

WidgetsBinding.instance.addPostFrameCallback((_) =>
        ShowCaseWidget.startShowCase(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.

Download Flutter Show Case View plugin source code on GitHub

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.