flutter multiple letter selection by sliding

[elomoery]

First of all, thank you very much for the great explanation
Successful and organized work exclusively
I hope you enjoy the delivery games
No one has explained it yet. I hope you will explain it beforehand
I have an initial code to express the idea

import 'dart:math' as math;

import 'package:flutter/material.dart';

class DrawPatternGame extends StatefulWidget {
const DrawPatternGame({Key? key}) : super(key: key);

@OverRide
State createState() => _DrawPatternGameState();
}

class _DrawPatternGameState extends State {
List stringList = ["E", "L", "A", "K", "İ", "N", "U", "G"];
List selectedLetter = [];

double radius = 80;
List endLineOffsetList = [];
List letterOffsetList = [];

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Draw Game"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 300,
color: Colors.green,
child: Center(
child: Container(
padding: selectedLetter.isNotEmpty
? const EdgeInsets.fromLTRB(8, 8, 8, 0)
: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.pink, borderRadius: BorderRadius.circular(32)),
child: Text(
selectedLetter.toSet().join(),
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
letterSpacing: 8,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
)),
),
Center(
child: GestureDetector(
onPanStart: (details) {
Offset correctedOffset = Offset(details.localPosition.dx - 104,
details.localPosition.dy - 104);
for (var i = 0; i < letterOffsetList.length; i++) {
if ((correctedOffset - (letterOffsetList[i])).distance < 24 &&
!selectedLetter.contains(stringList[i])) {
selectedLetter.add(stringList[i]);
print(stringList[i]);

                endLineOffsetList
                  ..add(letterOffsetList[i])
                  ..add(letterOffsetList[i]);
                setState(() {});
                letterOffsetList = [];
                break;
              }
            }
          },
          onPanUpdate: (details) {
            if (endLineOffsetList.isNotEmpty &&
                selectedLetter.length < stringList.length) {
              Offset correctedOffset = Offset(
                  details.localPosition.dx - 104,
                  details.localPosition.dy - 104);
              endLineOffsetList[endLineOffsetList.length - 1] =
                  correctedOffset;
              for (var i = 0; i < letterOffsetList.length; i++) {
                if ((correctedOffset - (letterOffsetList[i])).distance <
                        24 &&
                    !selectedLetter.contains(stringList[i])) {
                  endLineOffsetList[endLineOffsetList.length - 1] =
                      letterOffsetList[i];
                  selectedLetter.add(stringList[i]);
                  endLineOffsetList.add(letterOffsetList[i]);
                  print(stringList[i]);
                  Feedback.forTap(context);

                  break;
                }
              }
              setState(() {});
              letterOffsetList = [];
            }
          },
          onPanEnd: (details) {
            selectedLetter = [];

            endLineOffsetList = [];

            setState(() {});
          },
          child: Stack(
            alignment: Alignment.center,
            children: [
              CircleAvatar(
                radius: radius + 32,
              ),
              CustomPaint(
                painter: LinePainter(endLineOffsetList: endLineOffsetList),
              ),
              ...List.generate(
                stringList.length,
                (i) {
                  letterOffsetList.add(Offset(
                      radius *
                          math.cos(2 * i * math.pi / stringList.length),
                      radius *
                          math.sin(2 * i * math.pi / stringList.length)));
                  return Transform.translate(
                    offset: letterOffsetList[i],
                    child: CircleAvatar(
                      backgroundColor:
                          selectedLetter.contains(stringList[i])
                              ? Colors.pink
                              : null,
                      child: SizedBox(
                        width: 32,
                        height: 32,
                        child: Text(
                          stringList[i],
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 32,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  );
                },
              )
            ],
          ),
        ),
      )
    ],
  ),
);

}
}

class LinePainter extends CustomPainter {
final List? endLineOffsetList;
LinePainter({this.endLineOffsetList});
@OverRide
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.pink
..strokeWidth = 5
..strokeCap = StrokeCap.round;
if (endLineOffsetList != null && endLineOffsetList!.length >= 2) {
for (var i = 0; i < endLineOffsetList!.length - 1; ++i) {
canvas.drawLine(
endLineOffsetList![i], endLineOffsetList![i + 1], paint);
}
}
}

@OverRide
bool shouldRepaint(LinePainter oldDelegate) => true;

@OverRide
bool shouldRebuildSemantics(LinePainter oldDelegate) => true;
}
https://stackoverflow.com/questions/61398834/flutter-multiple-letter-selection-by-sliding-motion-event?fbclid=IwAR3DjJaX45wPX8ehsl-IX1204wNYEjG57IAfHDvrhe4HLOaOEOeYkc8Sz2k
I hope you will accept my suggestion
Thank you for your understanding