Want to create a custom control with Flutter? Your code isn’t using the GestureDetector anywhere.
You should use it to wrap the CustomPaint the build() function of TouchControlState.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | import 'package:flutter/material.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/rendering.dart'; void main() { runApp(new TouchTest()); } class TouchTest extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Touch Test', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new Scaffold( appBar: new AppBar( title: const Text('Test'), ), body: new Container( decoration: new BoxDecoration( color: Colors.white, border: new Border.all( color: Colors.black, width: 2.0, ), ), child: new Center( child: new TouchControl() ), ), ) ); } } class TouchControl extends StatefulWidget { final double xPos; final double yPos; final ValueChanged<Offset> onChanged; const TouchControl({Key key, this.onChanged, this.xPos:0.0, this.yPos:0.0}) : super(key: key); @override TouchControlState createState() => new TouchControlState(); } /** * Draws a circle at supplied position. * */ class TouchControlState extends State<TouchControl> { double xPos = 0.0; double yPos = 0.0; GlobalKey _painterKey = new GlobalKey(); void onChanged(Offset offset) { final RenderBox referenceBox = context.findRenderObject(); Offset position = referenceBox.globalToLocal(offset); if (widget.onChanged != null) widget.onChanged(position); setState(() { xPos = position.dx; yPos = position.dy; }); } @override bool hitTestSelf(Offset position) => true; @override void handleEvent(PointerEvent event, BoxHitTestEntry entry) { if (event is PointerDownEvent ) { // ?? } } void _handlePanStart(DragStartDetails details) { onChanged(details.globalPosition); } void _handlePanEnd(DragEndDetails details) { print('end'); // TODO } void _handlePanUpdate(DragUpdateDetails details) { onChanged(details.globalPosition); } @override Widget build(BuildContext context) { return new ConstrainedBox( constraints: new BoxConstraints.expand(), child: new GestureDetector( behavior: HitTestBehavior.opaque, onPanStart:_handlePanStart, onPanEnd: _handlePanEnd, onPanUpdate: _handlePanUpdate, child: new CustomPaint( size: new Size(xPos, yPos), painter: new TouchControlPainter(xPos, yPos), ), ), ); } } class TouchControlPainter extends CustomPainter { static const markerRadius = 10.0; final double xPos; final double yPos; TouchControlPainter(this.xPos, this.yPos); @override void paint(Canvas canvas, Size size) { final paint = new Paint() ..color = Colors.blue[400] ..style = PaintingStyle.fill; canvas.drawCircle(new Offset(xPos, yPos), markerRadius, paint); } @override bool shouldRepaint(TouchControlPainter old) => xPos != old.xPos && yPos !=old.yPos; } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
