Flutter User Guidance Package!
2 min readMay 31, 2023
Provide the user guidance widget to make developers easy to make new user tips.
UserGuildanceAnchor:
The widget is used to mark what widget needs highlight.
UserGuildance:
The widget is used to show highlight items. It makes sure the widget show on full screen.
UserGuidanceController:
The controller is used to show, hide and move the next step.
TipWidget:
The widget is the default widget that is used in UserGuildance. You can customize it to implement the different styles. It just wraps BubbleWidget.
BubbleWidget:
The widget provides basic tip functionality.
- Install flutter_user_guildance package in YAML file.
- Create a userGuildance controller and later this controller is used to reference the widget which we want to show user guidance to our user.
- Don’t forget to dispose of it.
- Start by returning a UserGuidance and tipBuilder to define how you want the user guide to be displayed in front of the user.
- Start with the highlighting of the floating Action Button. Simply I wrapped the floating action widget with the userGuildanceAnchor widget.
- Define the step = 1 and group = 1 because I want to start my user guidance from the Floating action button.
- In the body, I have wrapped ElevatedButton with UserGuidanceAnchor with step =2, group =1;
- I also wrapped userGuidanceAnchor to the TabView widget which is step =3 and group=1;
I hope this article was helpful to you. Thank you for taking the time to read it. Your feedback and suggestions are always welcome.
