Skip to content

Latest commit

 

History

History
61 lines (52 loc) · 3.8 KB

README.md

File metadata and controls

61 lines (52 loc) · 3.8 KB

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

English 中文

Preview of Effects

Sample

Feature Introduction

  • 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);
  guideManager!.prepare([
    GuideItem(
      description: "Click here to go back",
      toGuideKey: keyAppBarBack,
      padding: EdgeInsets.zero,
    ),
  ]);
  guideManager!.show();
});

GuideManager

Parameter Description
context BuildContext
opacity Mask opacity, default value is 0.4
duration Tip block animation transition time, default value is 200ms, if set to zero then no animation

GuideItem

Parameter Description
descriptionWidget Custom description widget
toGuideKey Pass a GlobalKey for guidance area location
toGuideRect Pass a Rect for guidance area location
position Text display position in guidance area enum, presets include screenCenter, alignTopLeft, alignTopRight, alignBottomLeft, alignBottomRight, auto
padding Internal padding for the guidance area
borderRadius Border radius for the guidance area
textInterval Interval 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