Select number of items in list using gesture in flutter

Question

I am new to flutter and have to implement a functionality to select correct words from list of alphabets.First of all here is the image which i have to make.

The alphabets and the correct words will come from the server side.What is was thinking is that i will place all the Alphabets in grid view/list view and when user will select words by using gesture on the alphabets . I know that what i am thinking may be wrong.If thats the case then please tell me the correct way to achieve what is given in the image ? Thanks in advance.

Answer 1

After doing some more research I think I can point you in the right direction and I wrote a small demonstration app that should help you so I found a good article explaining why I was having issues nesting widgets that both receive touch input. It is slightly complex but the gist of it is. If multiple touch inputs are detected they are handled in what is called the GestureArena and the child widget always wins. You can define your own GestureFactory and use RawGestureDetector to work around this issue. However, this might be more than you need for your application and in my opinion is the more complicated route. The route I went still involves just GestureDetector obviously you would need to expand on this as it only draws one oval at this time but that should be easy.

 Offset position = Offset(0, 0);
  bool isTapped = false;

  double width = 50;
  double height = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: <Widget>[
          Center(
            child: Padding(
              padding: const EdgeInsets.all(30.0),
              child: GestureDetector(
                child: GridView(
                  physics: NeverScrollableScrollPhysics(), //Very Important if
// you don't have this line you will have conflicting touch inputs and with
// gridview being the child will win
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    childAspectRatio: 2,
                  ),
                  children: <Widget>[
                    ...letters
                        .map(
                          (letter) => Text(
                            letter,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.amber,
                              fontSize: 18,
                            ),
                          ),
                        )
                        .toList(),
                  ],
                ),
                onTapDown: (TapDownDetails details) {
                  //User Taps Screen
                  print('Global Position: ${details.globalPosition}');
                  setState(() {
                    position = Offset(
                      details.globalPosition.dx - 25,
                      details.globalPosition.dy - 25,
                    );
                    isTapped = true;
                  });
                  print(position);
                },
                onVerticalDragUpdate: (DragUpdateDetails details) {
                  print('${details.delta.dy}');
                  setState(() {
                    height += details.delta.dy;
                  });
                },
                onHorizontalDragUpdate: (DragUpdateDetails details) {
                  print('${details.delta.dx}');
                  setState(() {
                    width += details.delta.dx;
                  });
                },
                onTapCancel: () {
                  //User has released finger from screen
                  //Validate Word??
                },
              ),
            ),
          ),
          Positioned(
            top: position.dy,
            left: position.dx,
            child: Container(
              height: height,
              width: width,
              decoration: ShapeDecoration(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                  side: BorderSide(
                      color: isTapped ? Colors.blue : Colors.transparent,
                      width: 3.0),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Flutter Deep Dive: Gestures found this very helpful key to figuring this all out.