Flutter - Creating a custom control with Flutter Flutter - Creating a custom control with Flutter dart dart

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.

screenshot

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;}