How to position an image precisely on a background image in Flutter using image coordinates?

Question

I'm attempting to overlay an image on top of another image using dynamic image coordinates and adding dynamic image scale values. I've employed a Stack as the parent widget, with the two image widgets as children. However, I'm facing challenges aligning their positions and scales accurately.

I am attaching screenshot of background image. I need to place another image on white space.

Background Image:-

Second Image :-

Image Coordinates:-

{
 'img_width: 540, '
      'img_height: 960, '
      'image_coordinates: {'
      'width_in_px: 280, '
      'height_in_px: 398, '
      'top_in_px: 405, '
      'left_in_px: 173, '
      'width: 51.85, '
      'height: 41.46, '
      'top: 62.92, '
      'left: 57.97, '
      'type: box}
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class EditActivity extends StatefulWidget{
  @override
  _EditActivity createState() => new _EditActivity();
}

class _EditActivity extends State<EditActivity> {

  String image = 'https://lh3.googleusercontent.com/a/ACg8ocKeSe_PhCD8mS7RySGmfDcwAcnHbiEXEk5fv4G2fTqbce4=s576-c-no';
  String bgImage = 'https://files.verbs.world/2023/11/13/19/Zf13UiLP8.PNG';

  String coordinates = ''
      'img_width: 540, '
      'img_height: 960, '
      'image_coordinates: {'
      'width_in_px: 280, '
      'height_in_px: 398, '
      'top_in_px: 405, '
      'left_in_px: 173, '
      'width: 51.85, '
      'height: 41.46, '
      'top: 62.92, '
      'left: 57.97, '
      'type: box}';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            
            Container(
              width: 540,
              height: 960,
              child: Image.network(bgImage,fit: BoxFit.fitWidth,),
            ),
            Positioned(left: 173,top: 408 ,child: Container(
              color: Colors.amber,
              width: 280,
              height: 398,
              alignment: Alignment.center,
              child: Image.network(image,fit: BoxFit.cover,width: 280,
                height: 398,
              ),
            ),)

          ],
        ),
      ),
    );
  }
}

I'm attempting to overlay an image on top of another image using dynamic image coordinates and adding dynamic image scale values. I've employed a Stack as the parent widget, with the two image widgets as children. However, I'm facing challenges aligning their positions and scales accurately.

Answer 1

Change Positioned for center and use padding for move to site you need, In the Stack, put the image first and then the background so that it fits you better.

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

  @override
  _EditActivity createState() => _EditActivity();
}

class _EditActivity extends State<EditActivity> {
  String image =
      'https://lh3.googleusercontent.com/a/ACg8ocKeSe_PhCD8mS7RySGmfDcwAcnHbiEXEk5fv4G2fTqbce4=s576-c-no';
  String bgImage = 'https://files.verbs.world/2023/11/13/19/Zf13UiLP8.PNG';

  String coordinates = ''
      'img_width: 540, '
      'img_height: 960, '
      'image_coordinates: {'
      'width_in_px: 280, '
      'height_in_px: 398, '
      'top_in_px: 405, '
      'left_in_px: 173, '
      'width: 51.85, '
      'height: 41.46, '
      'top: 62.92, '
      'left: 57.97, '
      'type: box}';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(
                left: 92,
                top: 240,
              ),
              child: Center(
                child: Container(
                  color: Colors.amber,
                  width: 280,
                  height: 398,
                  alignment: Alignment.center,
                  child: Image.network(
                    image,
                    fit: BoxFit.cover,
                    width: 280,
                    height: 398,
                  ),
                ),
              ),
            ),
            Center(
              child: SizedBox(
                width: 540,
                height: 960,
                child: Image.network(
                  bgImage,
                  fit: BoxFit.fitWidth,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}