Different tooltips over sections of CustomPaint?

396 views
Skip to first unread message

Stephen Beitzel

unread,
Jun 23, 2020, 4:46:41 PM6/23/20
to Flutter Development (flutter-dev)
I'm developing an application for the web platform and at one point in the flow, it draws a coordinate plane and plots some points on the graph. I'm drawing this using a CustomPaint with a customized CustomPainter to draw the graph and points. I would like to be able to pop up a ToolTip to explain different graph features when the user hovers the mouse pointer over various parts of the graph. What's the most straightforward way to do this?

Right now I'm considering replacing the single CustomPaint with several and tiling them together, then wrapping each one in a ToolTip. This seems really clunky, though, and it feels like there ought to be a way to define regions within the CustomPaint's canvas and triggering different tooltips for different regions. Help?

Souvik Dutta

unread,
Jun 25, 2020, 10:50:19 AM6/25/20
to Stephen Beitzel, Flutter Development (flutter-dev)
I was thinking about using a trasparent container and then grabbing hover/ longpress data probably using a gesture detector.

Souvik flutter dev

On Wed, Jun 24, 2020, 2:16 AM Stephen Beitzel <sumd...@gmail.com> wrote:
I'm developing an application for the web platform and at one point in the flow, it draws a coordinate plane and plots some points on the graph. I'm drawing this using a CustomPaint with a customized CustomPainter to draw the graph and points. I would like to be able to pop up a ToolTip to explain different graph features when the user hovers the mouse pointer over various parts of the graph. What's the most straightforward way to do this?

Right now I'm considering replacing the single CustomPaint with several and tiling them together, then wrapping each one in a ToolTip. This seems really clunky, though, and it feels like there ought to be a way to define regions within the CustomPaint's canvas and triggering different tooltips for different regions. Help?

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/1fb8295e-b723-499d-9f17-f06d23fc1a8do%40googlegroups.com.

Stephen Beitzel

unread,
Jun 25, 2020, 11:05:49 AM6/25/20
to Flutter Development (flutter-dev)

Thank you for the idea.


Ultimately, I decided to go with a Stack, where the bottom layer is the graph and then higher layers are Positioned Container inside Tooltip inside Opacity. That way the Containers are transparent (from Opacity) and they're positioned just where I want them, and the Tooltip handles mouse hover detection.

Reply all
Reply to author
Forward
0 new messages