Crafting Sophisticated Flutter UI using Info Bubbles 🎨
Show Info Bubbles in your Flutter app to notify user about different features and hints.
In this article, we will build an elegant Info Bubble. We will implement a custom dialog to show user about different features and options in our app.
Create the Bubble Widget 🔨
Let’s start with a basic StatefulWidget for our Info Bubble.
We have created basic InfoBubbleDialogWidget class it will take some basic parameter like title, description, bgColor, bubbleWidget. We will use this parameter to build the bubble widget.
You can customize the UI according to your needs.🚀
Now we will add GlobalKey to our constructor. This GlobalKey will be assigned to the Anchor Widget (widget on which the bubble will focus on), on top of which we will show our bubble widget. We will use this key to generate the X-Y coordinates of the bubble widget with reference to the anchor widget.
We have also fetched the height and width of the device screen using the
key.
Calculate Bubble Position 📐
Now we will calculate the exact position of our bubble widget on screen. The position of the bubble will be decided by the position of the Anchor Widget. Checkout the below figure to understand the bubble position with respect to the anchor widget.
To calculate the position of the bubble, we will use the GlobalKey of Anchor Widget. Using the below extension function, we will get the constraints of the Anchor Widget. This constraints, will help us place the bubble widget inside a Stack and position it.
We added a Stack widget and placed the bubble widget inside using the calculated position.
Add Bubble Pointer Tip 🎯
Now we will add a triangle tip to our bubble widget. This triangle will point in the direction of the Anchored Widget. For this, we will create a CustomPainter to draw a triangle.
Now we will add this triangle to bubble widget. The triangle will be shown relative to the position of our Anchor Widget. According to the position, we will show the triangle tip above or below the bubble.
Enhancing Bubbles with Smooth Animation 🎨
Let’s add animation to our bubble widget. This will move the bubble vertically and make it feel like it’s floating.
To achieve this, we will use AnimatedPostioned and add an animation duration to the widget. We will update the position of the widget slightly up and down to animate it. A timer will update the position periodically.
We will create a Dialog and display our created widget to show beautiful bubble animation.
Add Bubble widget to Anchor Widget 📌
Just add a key to the anchor widget and call the showInfoBubble method to show the bubble widget with desired parameters.
Full Code of Info Bubble 🎓
Thank you, and I hope this article helped you in some way. If you like the post, please support the article by sharing it. Have a nice day!👋
I am an mobile enthusiast 📱. My expertise is in Flutter and Android development, with more than 5 years of experience in the industry.
I would love to write technical blogs for you. Writing blogs and helping people is what I crave for 😊 .You can contact me at my email(abdulrehman0796@gmail.com) for any collaboration 👋
🔗 LinkedIn: https://www.linkedin.com/in/abdul-rehman-khilji/
