CODEWITHSUNDEEP
flutterdrawingtouch-eventcustom-painter
nicover
nicover

Reputation: 2633

How to touch/drag widgets under a CustomPaint in Flutter

I have a media editor class which is editing photo/video with stickers/text/paint...

I want the user be able to draw above all others widgets like in this preview from SnapChat. This is what I'm trying to do :

enter image description here

So the CustomPainter is placed in last inside a Stack.

The problem is my CustomPainter which contain color draws is fitting the screen and is taking all touch events even when there is NO GestureDetector around it.

My code used for the painter is inspired by this plugin :

GestureDetector(
            onPanUpdate: (details) {
              _onPanUpdate(details);
            },
            onPanStart: (details) {
              _onPanStart(details);
            },
            onPanEnd: (details) {
              _onPanEnd(details);
            },
            child: CustomPaint(
              size: Size.infinite,
              willChange: true,
              painter: DrawPainter(painterController.pathHistory,
                  repaint: painterController),
            ),
          ),

As is said the GestureDetector is not the problem because if we remove it, the painter itself will receive all events only with this :

CustomPaint(
 size: Size.infinite
)

So the question is how can I display drawing color on top of screen and still touch & drag others widgets above in Stack like in the preview ?

Upvotes: 3

Views: 687

Answers (1)

Hisham Syed
Hisham Syed

Reputation: 115

Try touchable. You can add gesture callbacks to individual shapes.

Upvotes: 0

Related Questions