Как выровнять дочернюю позицию виджета в соответствии с координатами касания этого виджета?

Question

У меня есть виджет «Список карт», и я хочу, чтобы какой-либо ребенок появлялся, когда пользователь касается этой точной карты, и выравнивал его в соответствии с координатами точки касания, например, centerRight, topRight, bottomRight.

Как мне добиться это? Вот псевдокод, иллюстрирующий мой вопрос.

        var position = Alignment.bottomRight;

        InkWell(
          onTap: (){
            /// get touch point regards first container
            /// if touched in 1/3 of child's height, then position == Alignment.topRight, and so on
          },
          child: Container(
            height: 100, width: 100,
            child: Container(
              alignment: position,
            ),
          ),
        )

Answer 1

Попробуйте и измените как ваше требование!

Alignment position = Alignment.center;
  double w = 0, h = 0, currentX = 0, currentY = 0;

  @override
  Widget build(BuildContext context) {
    w = context.size.width;
    h = context.size.height;

    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          alignment: position,
          width: double.infinity,
          height: double.infinity,
          child: GestureDetector(
            onTapUp: (det) {
              print(det.localPosition);
              setState(() {
                currentX = det.localPosition.dx;
                currentY = det.localPosition.dy;
                if (currentX <= (w / 2) && currentY <= (h / 2))
                  position = Alignment.topLeft;
                else if (currentX < (w / 2) && currentY > (h / 2))
                  position = Alignment.bottomLeft;
                else if (currentX > (w / 2) && currentY <= (h / 2))
                  position = Alignment.topRight;
                else if (currentX > (w / 2) && currentY > (h / 2))
                  position = Alignment.bottomRight;
                //and so on... centerLeft,centerRight, etc..
              });
            },
            child: Container(
              color: Colors.green,
              width: 150,
              height: 150,
            ),
          ),
        ));
  }