Flutter - Creating 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
.
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;}