Sunday, March 26, 2023

How to Showcase features in flutter

Flutter plugin that allows you to showcase your features on iOS and Android. 

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

It is inspired from Fluttery’s Flutter challenge.


  1. Add dependency to pubspec.yamlGet the latest version in the ‘Installing’ tab on
    showcaseview: <latest-version>
  1. Import the package
import 'package:showcaseview/showcaseview.dart';
  1. Adding a ShowCaseWidget widget.
  builder: Builder(
    builder : (context) ()=> Somewidget()
  1. Adding a Showcase widget.
GlobalKey _one = GlobalKey();
GlobalKey _two = GlobalKey();
GlobalKey _three = GlobalKey();


  key: _one,
  title: 'Menu',
  description: 'Click here to see menu options',
  child: Icon(,
    color: Colors.black45,

Some more optional parameters

  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: ...,
  1. Using a Showcase.withWidget widget.
  key: _three,
  cHeight: 80,
  cWidth: 140,
  shapeBorder: CircleBorder(),
  container: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
  child: ...,
  1. Starting the ShowCase
    ShowCaseWidget.startShowCase(context, [_one, _two, _three]);
  1. onFinish method for ShowCase
  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 for a more complete example.


The example app running in Android