我想在颤动中制作一个tasbeeh计数器，当屏幕尺寸变化时按钮图像不保持其位置

Question

我想使用媒体查询而不是静态高度。所以发生的事情是，当屏幕尺寸改变时，按钮会向上和向下移动。我想将按钮放置在特定位置，这样即使屏幕尺寸发生变化，它也不会移动。[]()

//Currently my code looks like this    

import 'package:flutter/material.dart';

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

  @override
  State<TasbeehMainScreen> createState() => _TasbeehMainScreenState();
}

class _TasbeehMainScreenState extends State<TasbeehMainScreen> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.sizeOf(context).height;
    final width = MediaQuery.sizeOf(context).width;

    return  Scaffold(
      body: Container(
         decoration: const BoxDecoration(
          // image: DecorationImage(
          //   image: AssetImage('assets/blackbg.png', ),
          //   fit: BoxFit.cover,
          // ),
          
        ),

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
         Center(child: Image.asset('assets/images/counter.png',height: height*0.8, width: width*0.8,)),

           Positioned(
              bottom: height*0.18, 
              child: GestureDetector(
                onTap: () {
                
                },
                child: Image.asset('assets/images/button.png', height:height*0.2, width:width*0.2),
              ),
            ),

              ],
            )


          
          ],
        ),
      ),
      
    );
  }
}

Answer 1

嘿，几天前我回答了一个类似的问题，关于映射图像以触发回调，我认为这将是您问题的解决方案。

您可以使用 flutter_image_map，它的存储库中有一个 ROI 选择工具。映射完所有内容后，只需按照示例进行操作，您将根据图像内的区域实现 onPress 回调。