【Flutter】Stackで大きさを固定しつつ、位置を絶対位置にする方法

はじめに

こんな感じの挙動をFlutterで実装中です。

画像の表示はStackを使って、GesutureDetectorでDrag位置を取得して、その位置に画像を表示するということをしたかったのですが、Stackを使って大きさを固定しつつ、絶対位置に表示する方法に苦戦したので備忘録として残しておきたいと思います。

ソースの全文

下記のソースをコピペでgifの動きができるようになります。

class ImageDetail extends StatefulWidget {
  const ImageDetail({
    super.key,
  });

  @override
  State<ImageDetail> createState() => _ImageDetailState();
}

class _ImageDetailState extends State<ImageDetail> {
  Offset offset = const Offset(0, 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Transform.translate(
                offset: offset,
                child: GestureDetector(
                  onPanUpdate: (details) {
                    setState(() {
                      offset += details.delta;
                    });
                  },
                  child: Container(
                    width: MediaQuery.of(context).size.width * (0.4),
                    height: MediaQuery.of(context).size.width * (0.4),
                    color: Colors.grey,
                    child: const Center(
                      child: Text("サンプル"),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}  
``