flutter - 如何在颤动中连接两个小部件

Question

我想画一条连接两个小部件的直线，它应该由用户连接。

我试过了。

import 'package:flutter/material.dart';

class Homedemo extends StatefulWidget {
  @override
  _HomedemoState createState() => _HomedemoState();
}

class _HomedemoState extends State<Homedemo> {

  List<Offset> points = <Offset>[];

  @override
  Widget build(BuildContext context) {

    final Container sketchArea = Container(
      margin: EdgeInsets.all(1.0),
      alignment: Alignment.topLeft,
      color: Colors.blueGrey[50],
      child: CustomPaint(
        painter: Sketcher(points),
      ),
    );

    return Container(
      child: Stack(
        children: <Widget>[
          GestureDetector(
            onPanUpdate: (DragUpdateDetails details) {
              setState(() {
               RenderBox box = context.findRenderObject();
                Offset point = box.globalToLocal(details.globalPosition);
                points[points.length-1] = point;
                print(points);
              });
            },
            onPanStart: (DragStartDetails details){
              setState(() {
                print("start");
                print(points);
                RenderBox box = context.findRenderObject();Offset point = box.globalToLocal(details.globalPosition);
                point = point.translate(0.0, -(AppBar().preferredSize.height));
                points = List.from(points)..add(point);
              });
            },
            onPanEnd: (DragEndDetails details) {
              setState(() {
              //  points.clear();
              });
              },
            child: sketchArea,
          ),

          Positioned(
            top: 50.0,
            left: 50.0,
            child: new Container(
                height: 50.0,
                width: 50.0,
                color: Colors.amberAccent,
              ),
          ),
          Positioned(
            top: 250.0,
            left: 350.0,
            child: new Container(
                height: 50.0,
                width: 50.0,
                color: Colors.green,
              ),
          ),
        ],
      ),

    );
  }
}


class Sketcher extends CustomPainter {

  final List<Offset> points ;

  Sketcher(this.points);

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

  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 10.0;

    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i], points[i+1], paint);

      }
    }
  }
}

我可以画一条直线，但我不知道如何准确地开始和停止，所以我看起来像两个小部件连接在一起。

标签： flutterflutter-layout