Position a widget, inside a stack, but according to the center of the widget

Question

I want to position a widget, CustomWidget , but at the specified position, ie, top, left values, in the Positioned widget, I want there to be the center of my CustomWidget , instead of the top-left corner of my CustomWidget .

I want something like this:-

Stack(
  children: [
    Positioned(
      left: x,
      top: y,
      alignment: Alignment.center, //Alignment of the child widget, such that at (x, y) there is the center of the widget.
      child: CustomWidget(),
    ),
  ],
);

Here is the type of UI I am trying to make, I am trying to make both cases:-

CustomWidget does not have any specific type, I am currently trying to make a general method, It might be a simple Text Widget with some variable value, or maybe a Widget with a Row of Image , Divider and Text . I am basically using CustomWidget as a kind of popup, which will be used in case of some extra information, and also as a stamp over a widget, wherever the user clicks, in both cases, I cannot be certain of the size.

Note:- I do want to position the CustomWidget at a specified offset in the stack, but want that there should be the center of the CustomWidget instead of the top-left corner of CustomWidget .

Answer 1

You don't need to use the Positioned widget. Try using the Align widget, remember to add alignment: Alignment.center, to center it.

Answer 2

I have developed a package , with many helpful components (basically the components, which I use often, in all my projects, so to prevent writing the same thing everywhere ). So there I have added this new Widget named PositionedAlign this work according to the above question. I hope this helps anyone who might need it.