Ive create a popup menu widget which takes two arguments :a button widget, and a menu widget . When the button is pressed the menu widget is passed to an OverlayEntry as the child which is then added to the Overlay.of(context)
I'd like the resulting display to be as such:
O (Button)
____|____
| MENU |
|_______|
I can place the menu widget inside a Positioned Widget to move it freely around the Overlay, but I dont know how to get the correct coordinates. I can get the center of the Button by finding it's Renderbox, but I cant know the size, and therefore the correct position, of the Menu until after it's draw (as it can be any widget).
Is there some soft of layout option to tell a Widget of any size to vertically or horzontally align itself with a given coordinate?
To get the size of a widget:
First give your Widget a key:
key: _key,
Then you can get the size(and position) like this:
_getSize() {
final RenderBox renderBox = _key.currentContext.findRenderObject();
final size = renderBox.size;
final position = renderBox.localToGlobal(Offset.zero);
final height = size.height; //same for width
}
Related
I added a lot widgets into a verticalBox as child widgets. The verticalBox's parent widget is a scrollbox. So it could get right position when I scroll the bar if the created widget is rendering in the scrollbar. But if not the position look like a cache position.
And this is the way I get the absolutePos with widgets.
if (Widget)
{
const FGeometry& Geometry = Widget->GetCachedGeometry();
FVector2D Pixel2D;
FVector2D Viewport2D;
USlateBlueprintLibrary::LocalToViewport(Widget, Geometry, LocalPos, Pixel2D, Viewport2D);
// PosX, PosY is the output position
PosX = Viewport2D.X;
PosY = Viewport2D.Y;
}
I have been trying hard to reference the width of an image all to no avail. Let's say I set an image height to be 375.0. Ordinarily, the width adjust itself by default based on the set height. Please, how can i be able to print the corresponding width which wasn't specified to the console?
Any help will be appreciated.
You need to provide a GlobalKey to the image. Then you can pass the key and the context to the following function:
Size getSize(GlobalKey _key, BuildContext context) {
final RenderBox renderBox = _key.currentContext.findRenderObject();
final boxSize = renderBox.size;
return boxSize;
}
I am trying to implement Match-The-Following. The approach I could come up with is that the onPanStart and onPanEnd to get the starting Offset and ending Offset. I also need to get the Offset of the widget on the screen to match.
Is there any method to get the local position of widget on the screen (Widget is a Container) ?
I think this is what you are looking for:
Set a key for the Widget:
Container(
key: _key,
color: Colors.red,
),
And get the position of the widget like this:
final RenderBox renderBox = _key.currentContext.findRenderObject();
final position = renderBox.localToGlobal(Offset.zero);
How do I get the height and width of this UI element in pixel?
Use this to get the bottom nav bar height
MediaQuery.of(context).viewInsets.bottom
The following works for me:
final double navigationBarHeight = MediaQuery.of(context).padding.bottom
If
final double navigationBarHeight = MediaQuery.of(context).padding.bottom
doesn't work, check if you are not calling this inside
SafeArea, a widget that consumes this padding with a Padding widget and automatically removes it from the MediaQuery for its child.
I have a Scrollable (ListView or any other) and it contains a transparent widget, say Container(height:200). I can see through both the widget and the scrollable (in other words I can see the widgets behind the scrollable).
How can I be able to click through the transparent widget and the scrollable, so that I reach the widgets behind the scrollable?
ListView(
children: [
Container(height: 200), // Transparent.
Container(color: Colors.red, height: 200),
],
);
Note, I cannot wrap the scrollable with IgnorePointer, because I still want to click the non-transparent widgets in the scrollable.
The only reasonable solution I can think of is to have a GestureDetector on the transparent container, which will give you the global position of the taps:
GestureDetector(
onTapUp: (TapUpDetails tapUpDetails) {
print("onTapUp global: " + tapUpDetails.globalPosition.toString());
},
And then add a Key to the widget behind the list, and use it to get the global position of the top left corner of the widget's rectangle, as well as the size of the widget, and use those to get the rectangle of the widget:
RenderBox renderBox = _key.currentContext.findRenderObject();
Offset topLeftCorner = renderBox.localToGlobal(Offset.zero);
Size size = renderBox.size;
Rect rectangle = topLeftCorner & size;
If the background widget does not move, you can do it within initState on the very next frame using WidgetsBinding.instance.addPostFrameCallback (the render object will be null if do it synchronously within initState) and save the Rect - otherwise you will have to recalculate it on every tap.
And then finally on each tap on the transparent container you can calculate whether the tap's position is within the boundaries of the background widget, and invoke the corresponding code:
// if tap is within boundaries of the background widget
if (rectangle.contains(tapUpDetails.globalPosition)) {
// your code here
}