Flutter User Guidance Package!

Flutter Queen✨
2 min readMay 31, 2023


Provide the user guidance widget to make developers easy to make new user tips.


The widget is used to mark what widget needs highlight.


The widget is used to show highlight items. It makes sure the widget show on full screen.


The controller is used to show, hide and move the next step.


The widget is the default widget that is used in UserGuildance. You can customize it to implement the different styles. It just wraps 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.

Support Me: