How to make a Pie Chart with focusable elements in Flutter?

[Charlie Rick]

I'm looking for some help with creating this UX in Flutter. I have created a mockup in After Effects, please excuse my lack of skills, haven't used AE in a long time!

https://vimeo.com/394465109

I have tried using GestureDetectors and Listeners but none of these detect events across containers.

Any help would be greatly appreciated.

[Suzuki Tomohiro]

onPanUpdate works when I drag something in the box. Attached screenshot. onTap also works.

You might consider mouse-hover action when you sent the original email. However, in iOS (or Android), you cannot use mouse hover. (I don't use Flutter web.)

On Mon, Mar 2, 2020 at 2:14 PM Charlie Rick <charli...@gmail.com> wrote:

Hey Suzuki, thanks very much, you’ve got a cool name!

I’ve shared a gist of what I have here: 

https://gist.github.com/CharlieRick/8676fa342bb6a67a343d6ea8eccb9250

Thanks so much for your help!

On Mon, 2 Mar 2020 at 17:34, Suzuki Tomohiro <suz...@gmail.com> wrote:

That mockup looks cool.

Would you share the code that you tried with GestureDetectors?

--
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/6a0b123f-0cc8-41be-9951-aad6cf441def%40googlegroups.com.

[Justin McCandless]

Another really powerful tool for drawing very custom widgets like this is CustomPaint.  It will allow you to draw shapes like the pie slices while also specifying how to do hit detection on them, so they work just like a normal widget.

Depending on how you use CustomPaint, you may also want to look at MultiChildRenderObjectWidget for doing the custom layout of placing the pie slices in the right place in the circle.

Justin

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAHWORbrB%3DFiOUmU_hUEvqGdKcqjRncJ2LL6Vi1%2BGwAJ962%2B_rQ%40mail.gmail.com.