feature_guider 1.0.2

Published Aug 12, 2025
SDKflutter
Platformandroidioswindowsmacosweb

Feature Introduction for First-time Users.

A lightweight and feature-rich tool for functional guidance and tips

English 中文

Preview of Effects

Sample

Feature Introduction

  • Supports one-time display of guide items using optional id with SharedPreferences
  • Supports custom description widget for GUIDANCE AREA
  • Supports locking the tip position with Widget#key or Rect
  • Supports setting the background mask opacity
  • Supports setting the duration of animation transitions
  • Supports preset options for the position of the description widget
  • Supports setting the padding of the guidance area
  • Supports setting the border radius of the guidance area
  • Supports setting the interval between description and guidance area

Usage

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  guideManager ??= GuideManager(context, opacity: 0.7);
  await guideManager!.prepare([
    GuideItem(
      description: "Click here to go back",
      toGuideKey: keyAppBarBack,
      padding: EdgeInsets.zero,
    ),
  ]);
  guideManager!.show();
});

GuideManager

ParameterDescription
contextBuildContext
opacityMask opacity, default value is 0.4
durationTip block animation transition time, default value is 200ms, if set to zero then no animation

GuideItem

ParameterDescription
idUnique identifier for this guide item, used to track if it's already shown
descriptionWidgetCustom description widget
toGuideKeyPass a GlobalKey for guidance area location
toGuideRectPass a Rect for guidance area location
positionText display position in guidance area enum, presets include screenCenter, alignTopLeft, alignTopRight, alignBottomLeft, alignBottomRight, auto
paddingInternal padding for the guidance area
borderRadiusBorder radius for the guidance area
textIntervalInterval between description and guidance area

DescriptionPosition

  • screenCenter - Center of the screen
  • alignTopLeft - Positions the content above the target area, aligned to the left side
  • alignTopRight - Positions the content above the target area, aligned to the right side
  • alignBottomLeft - Positions the content below the target area, aligned to the left side
  • alignBottomRight - Positions the content below the target area, aligned to the right side
  • auto - Automatically determined based on the position of your component and the dimensions of the text