Position Text widget so that center of widget is on a specific location of parent Stack

Question

I have a Stack() widget that has a child Text() widget inside. I need that Text widget's center to be at [ left: 137, top: 201].

With Positioned(), I can only position the edges of the object. How can I position the Text widget's center? Is there a way to use the child widget's width / height to offset Positioned(), or some other way?

Stack(
        children: [
          ...,
          Positioned(
              left: 137,    // I want these coordinates to be the center
              top: 201,     // but they are the top left corner now
              child: Text("20%")
          )])

Wrapping the Text() widget with Center() doesn't seem to do anything?

I have a CustomPainter that draws graphics that is part of the same Stack(), and I can get the pixel coordinates of any painted point. I want to overlay text, and I want to be able to center the text on a specific point. In this picture I would like the "20%" text to be centered on the middle cross between green/blue (x: 137, y: 201), but I can only set the top left corner with Positioned()

I don't want the Text widget to be in the center of the Stack, I want the center of the Text widget to be in a certain (x, y) position. I just tested wrapping the widget with Center, didn't work. — ekuusi
Your problem is not clear enough... Could you add an image of your result and an image for what you want? I think that will make it very easy for others to read your question :). — Ali Abbas

ekuusi ekuusi · Accepted Answer · 2020-07-21T18:21:27

Solved this. I can make a Container with a hardcoded size that is bigger than the text will ever be. Now I can put a Center widget as the child of the container and the Text widget inside the Center widget. Presto, I can use the Container's dimensions + coordinates to precisely position my text.

Positioned(
    top: y-100,
    left: x-100,
    child: Container(
          width: 200,  // Now I just offset my Positioned() parameters
          height: 200, // by half the width & height as done above
          child: Center(
              child: Text(
            "Hello!"
          ))));

Position Text widget so that center of widget is on a specific location of parent Stack

1 Answers