onPanUpdate does not work in Flutter Web

[rishisinghal]

Hi,

I just tried the example in https://medium.com/flutter-community/bring-your-custompainter-paintings-to-life-in-flutter-using-touchable-c2413cd1897 and it was working for Android but not for web. In web I was not able to drag the earth.

Here is the sample program

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:touchable/touchable.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home:MyCoolPage(),
    );
  }
}

class MyCoolPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(child: MyWidget());
  }
}

class PaintingController extends ChangeNotifier {
  Offset circlePosition;
  Color backgroundColor = Colors.yellow;

  void moveCircle(Offset newPosition) {
    circlePosition = newPosition;
    notifyListeners();
  }

  void toggleBackGroundColor() {
    backgroundColor = backgroundColor == Colors.white ? Colors.blueGrey : Colors.white;
    notifyListeners();
  }
}

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<PaintingController>(
      create: (context) => PaintingController(),
      child: Consumer<PaintingController>(
        builder: (context, controller, child) => AnimatedContainer(
          color: controller.backgroundColor,
          duration: Duration(seconds: 1),
          child: CanvasTouchDetector(
            builder: (context) => CustomPaint(painter: MyPainter(context)),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final BuildContext context;
  final PaintingController controller;

  MyPainter(this.context) : controller = Provider.of<PaintingController>(context, listen: false);

  @override
  void paint(Canvas canvas, Size size) {
    TouchyCanvas touchyCanvas = TouchyCanvas(context, canvas);
    drawEarth(touchyCanvas, size);
    drawSun(touchyCanvas, size);
  }

  void drawEarth(TouchyCanvas canvas, Size size) {
    var blueCircleCenter = controller.circlePosition ?? Offset(size.width / 2, size.height / 2 - 100);

    canvas.drawCircle(blueCircleCenter, 60, Paint()..color = Colors.lightGreen, onPanUpdate: (details) {
      print("pan update called");
      controller
          .moveCircle(Offset(blueCircleCenter.dx + details.delta.dx * 2, blueCircleCenter.dy + details.delta.dy * 2));
    },
      onPanDown: (details) {
        print("pan down called");
        controller.moveCircle(Offset(details.localPosition.dx, details.localPosition.dy));
      },
    );

    canvas.drawCircle(blueCircleCenter, 30, Paint()..color = Colors.lightBlueAccent,
        hitTestBehavior: HitTestBehavior.translucent);
  }

  void drawSun(TouchyCanvas canvas, Size size) {
    var orangeCircleCenter = Offset(size.width / 2, size.height / 2 + 100);
    canvas.drawCircle(orangeCircleCenter, 80, Paint()..color = Colors.orangeAccent, onTapDown: (_) {
      controller.toggleBackGroundColor();
    });
    canvas.drawCircle(orangeCircleCenter, 50, Paint()..color = Colors.orange,
        hitTestBehavior: HitTestBehavior.translucent);
    canvas.drawCircle(orangeCircleCenter, 30, Paint()..color = Colors.deepOrangeAccent,
        hitTestBehavior: HitTestBehavior.translucent);
    canvas.drawCircle(orangeCircleCenter, 20, Paint()..color = Colors.deepOrange,
        hitTestBehavior: HitTestBehavior.translucent);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

[issue-label-bot]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.87. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[softmarshmallow]

updates on this?