Как эффективно создать приложение для отслеживания алфавита с помощью Flutter?

Question

Я пытаюсь создать приложение для отслеживания алфавитов с помощью Flutter.Ниже приведены скриншоты того, что я намерен достичь и чего я достиг на данный момент.

Намерение достичь:

https://imgur.com/3KfWFA7

Достигнуто с помощью приведенного ниже кода:

https://imgur.com/6LTcITG

import 'package:flutter/material.dart';

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

void main() => runApp(MyDrawApp());

class MyDrawApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: DrawCanvas(),
            floatingActionButton: FloatingActionButton(
                child: Icon(Icons.clear),
                onPressed: () {
                  _drawPoints.clear();
                },
            ),
        ),
    );
  }
}

class DrawCanvas extends StatefulWidget {
  @override
  _DrawCanvasState createState() => _DrawCanvasState();
}

class _DrawCanvasState extends State<DrawCanvas> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipPath(
        child: detectGestureForPainting(),
        clipper: UpperCaseA(),
      ),
    );
  }

  Widget detectGestureForPainting() {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          RenderBox object = context.findRenderObject();
          Offset _localPosition = object.globalToLocal(details.globalPosition);
          _drawPoints = List.from(_drawPoints)..add(_localPosition);
        });
      },
      onPanEnd: (DragEndDetails details) => _drawPoints.add(null),
      child: CustomPaint(
        painter: PaintBrush(points: _drawPoints),
        child: Container(
          width: 500,
          height: 900,
        ),
        // size: Size.fromHeight(375),
      ),
    );
  }
}


class UpperCaseA extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double _width = size.width;
    double _height = size.height;

    Path mypath = Path();

    print("Height = ${size.height}");
    print("Width = ${size.width}");

    mypath.moveTo(_width * 0.496, _height * 0.4373297);
    mypath.lineTo(_width * 0.330666667, _height * 0.671662125);
    mypath.lineTo(_width * 0.208, _height * 0.648501362);
    mypath.lineTo(_width * 0.434666667, _height * 0.328337875);
    mypath.lineTo(_width * 0.562666667, _height * 0.326975477);
    mypath.lineTo(_width * 0.789333333, _height * 0.648501362);
    mypath.lineTo(_width * 0.666666667, _height * 0.671662125);
    mypath.lineTo(_width * 0.610666667, _height * 0.59400545);
    mypath.lineTo(_width * 0.384, _height * 0.59400545);
    mypath.lineTo(_width * 0.432, _height * 0.525885559);
    mypath.lineTo(_width * 0.562666667, _height * 0.525885559);
    mypath.close();

    mypath.addArc(Rect.fromCircle(
            center: Offset(_width * 0.27, _height * 0.66),
            radius: _width * 0.0652), 0, 360);
    mypath.addArc(
        Rect.fromCircle(
            center: Offset(_width * 0.496, _height * 0.34),
            radius: _width * 0.0652), 0, 360);
    mypath.addArc(
        Rect.fromCircle(
            center: Offset(_width * 0.501, _height * 0.34),
            radius: _width * 0.0652),
        0,
        360);
    mypath.addArc(
        Rect.fromCircle(
            center: Offset(_width * 0.728, _height * 0.66),
            radius: _width * 0.0652),
        0,
        360);

    return mypath;

    // return Path.combine(PathOperation.reverseDifference, path, path1);
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class PaintBrush extends CustomPainter {
  List<Offset> points;

  PaintBrush({this.points});

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawColor(Colors.grey[350], BlendMode.src);

    Paint paint = new Paint()
      ..color = Colors.blueAccent.shade700
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 100.0;

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

  @override
  bool shouldRepaint(PaintBrush oldDelegate) => oldDelegate.points != points;
}

Может ли кто-нибудь предложить:

1. Поскольку выбранная ширина хода равна 100,0, краска переливается в другой раздел, какчтобы ограничить их желаемым путем трассировки.

2. Самыми сложными будут изогнутые края, например: «B», как мне их достичь.

3. Вместо простой краски можно использовать текстуру для трассировки.

Я понимаю, что слишком много вопросов, чтобы спросить, но любая помощь / предложения / документация / пример кода помогуттоннаЯ ценю ваше время и усилия.

Заранее спасибо !!!