Vishnubly
Vishnubly

Reputation: 729

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

I want to position a widget, CustomWidget, but at the specified position, i.e, 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:- enter image description here

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.

Upvotes: 3

Views: 1598

Answers (2)

Vishnubly
Vishnubly

Reputation: 729

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.

Upvotes: 0

My Car
My Car

Reputation: 4556

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

Upvotes: 0

Related Questions