1

I am building an Instagram clone (specifically image tag feature). I am able to put tags on top of images the user uploads but when the screen size/orientation/Zoom changes the tags does not reposition themselves.

Could anyone tell me how can I achieve this and store tag position so that when I load image again in user feed, I could be able to see tags on the image.

5
  • Sounds like a layout issue, can you show us your layout and how the tags sit on the images?
    – Mark
    Mar 8, 2022 at 2:26
  • Same as the Instagram upload image feature. Mar 8, 2022 at 2:43
  • Please paste code, can't help you before that. It might to layout issue, but need code to check Mar 8, 2022 at 6:01
  • use tag text widget wrap with positioned widget into the stack widget Mar 8, 2022 at 6:50
  • I am using positioned with stack rn, let me update the question with my code. Thanks for your inputs Mar 8, 2022 at 11:30

2 Answers 2

1

You can wrap the image and the label in a Column or a Stack. A Column will put both the tag and the image in the center while with a Stack you can align the image in the center and the text below.
Example with Column:
Column (children: [Image.asset('assets/myasset.png'), Text('My image'), ] ),
Example with a Stack:
Stack(children:[Center(child: Text('My Image')), Align(alignment:Alignment.bottomCenter,child: Image.asset('assets/myasset.png'))]),

0

Use Mediaquery:

example:

 double screenHeight = MediaQuery.of(context).size.height;
 double screenWidth = MediaQuery.of(context).size.width;

// Example: Change position based on screen height

double positionTop = screenHeight * 0.3;

// Example: Change position based on screen width

double positionLeft = screenWidth * 0.2;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.