David Serrano Canales
David Serrano

David Serrano

Use this to explain how to use your app | Flutter PRO tip #2

Use this to explain how to use your app | Flutter PRO tip #2

David Serrano Canales
·Oct 28, 2022·

3 min read

Explain how to use your app to your users is key so that they understand how they can take advantage of its full potential and thus keep them as active users and increase retention rate.

📽 Video version available on YouTube and Odysee

Imagine you have the following application:

Sample app

Your goal is to explain to the user what the bottom right floating button does, as well as the edit and adjust buttons that appear on the top bar. For this we are going to use the tutorial_coach_mark package:

flutter pub add tutorial_coach_mark

The first step will be to create a GlobalKey and add it to each widget you want to focus:

final GlobalKey _floatingButtonKey = GlobalKey();
final GlobalKey _editButtonKey = GlobalKey();
final GlobalKey _settingsButtonKey = GlobalKey();

Each step of the tutorial is represented by an object of type TargetFocus. We are going to create a method that creates a list of these elements and we are going to assign them the keys we just created:

@override
void initState() {
  super.initState();

  _createTutorial();
}

// [...]

Future<void> _createTutorial() async {
  final targets = [
    TargetFocus(
      identify: 'floatingButton',
      keyTarget: _floatingButtonKey,
      alignSkip: Alignment.topCenter,
      contents: [
        TargetContent(
          align: ContentAlign.top,
          builder: (context, controller) => Text(
            'Use this button to add new elements to the list',
            style: Theme.of(context)
                .textTheme
                .titleLarge
                ?.copyWith(color: Colors.white),
          ),
        ),
      ],
    ),
    TargetFocus(
      identify: 'editButton',
      keyTarget: _editButtonKey,
      alignSkip: Alignment.bottomCenter,
      contents: [
        TargetContent(
          align: ContentAlign.bottom,
          builder: (context, controller) => Text(
            'You can edit the entries by pressing on the edit button',
            style: Theme.of(context)
                .textTheme
                .titleLarge
                ?.copyWith(color: Colors.white),
          ),
        ),
      ],
    ),
    TargetFocus(
      identify: 'settingsButton',
      keyTarget: _settingsButtonKey,
      alignSkip: Alignment.bottomCenter,
      contents: [
        TargetContent(
          align: ContentAlign.bottom,
          builder: (context, controller) => Text(
            'Configure the app in the settings screen',
            style: Theme.of(context)
                .textTheme
                .titleLarge
                ?.copyWith(color: Colors.white),
          ),
        ),
      ],
    ),
  ];
}

Now we are going to create a TutorialCoachMark type object where we are going to pass this list of targets. Then we will show the tutorial:

Future<void> _createTutorial() async {
  // [...]

  final tutorial = TutorialCoachMark(
    targets: targets,
  );

  Future.delayed(const Duration(milliseconds: 500), () {
    tutorial.show(context: context);
  });
}

And this is the final result:

app_working.gif

For the tutorial to display correctly it is important that the entire UI is loaded and ready, so a delay is used to call the show() method:

Future.delayed(const Duration(milliseconds: 500), () {
  tutorial.show(context: context);
});

You can use the shared_preferences plugin or any other mechanism to control that this tutorial is only displayed the first time the user opens the application.

You can visit this package's page on pub.dev to learn more details about the various configuration options it offers.

You have the complete source code available here.

Thank you for reading this far!


Emoji icons created by Freepik - Flaticon: flaticon.com/free-icons/emoji

Did you find this article valuable?

Support David Serrano Canales by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors