Flutter package allows you to Showcase your widgets step by step

ShowCaseView

Flutter plugin that allows you to showcase 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:
    showcaseview: ^0.1.1

Dart

2. Import the package

import 'package:showcaseview/showcaseview.dart';

Dart

3. Adding a ShowCaseWidget widget.

ShowCaseWidget(
  child: Somewidget(),
),

Dart

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

Dart

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

Dart

5. Using a Showcase.withWidget widget.

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

Dart

6. Starting the ShowCase

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

Dart

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]));

Dart

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.

GitHub

simformsolutions/flutter_showcaseview

13413

Flutter plugin that allows you to showcase your features on iOS and Android. 👌🔝🎉 — Read More

Latest commit to the master branch on 8-23-2019

Download as zip