In Flutter, How does one create a 'how this app works' walk-through?

Question

I want to launch a simple walk-through for our app. The user would log in for the first time (or select the 'tutorial' option in settings), and it would walk you through how to use the app.

To clarify, the app would launch a dialog/alertdialog and the background would go grey or become greyed out highlighting specific areas/buttons of the app to talk them through it. The dialog box would have a child of Text explaining how to use it.

After the user has clicked through the steps the tutorial would end but could be reactivated in settings.

Any help would be appreciated. Thanks

Amir_P · Accepted Answer · 2021-10-08T09:09:01.197

There is a plugin called showcaseview and does pretty much what you want. You can get it here. For using it you need to wrap the page you want to show in a ShowCaseWidget

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

then for every part of the page you want to show a guide for it, wrap it in a ShowCase

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

In Flutter, How does one create a 'how this app works' walk-through?

1 Answers1