I want to make a tasbeeh counter in flutter, button image is not maintaining its position when screen size is changing

Question

I want to use media query not static height. So what happened is that when screen size changes the button goes up and down. I want to fit button in a specific place so it does not move even when screen size changes.

//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

Hey I answered a similar question days ago regarding mapping images to trigger callbacks and I think it would be a solution to your problem.

You can use flutter_image_map which has a ROI selection tool that is in its repository. Once you've mapped everything just follow the example where you will be implementing the onPress callbacks depending on the region inside the image.