Getting the position of a widget in a Flutter test?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
How do you get the position of a Widget in a Flutter test? Ideally the center of the widget, but the top left coordinate would be fine too.
This is my test and attempt at a function that finds the location of a Widget on screen.
testWidgets('Pin is in center of screen', (WidgetTester tester) async {
await _setUp(tester); // Does setup
final findPin = find.byKey('pin');
final pinLocation = _getLocation(findPin.evaluate().first);
print(ui.window.physicalSize);
expect(pinLocation.dx, 1200.0);
expect(pinLocation.dy, 900.0);
});
Offset _getLocation(Element element) {
return (element.findRenderObject() as RenderBox).localToGlobal(Offset.zero);
}
The printing for ui.window.physicalSize (where ui is the dart:ui package) tells me the size is Size(2400.0, 1800.0). However, when I set those midpoints in my test, my test fails, saying that the Size is actually 395.0 and 305.0. My widget is only 30.0 x 30.0 in size, and even 395 +/- 30 doesn't equate anything in the 1200 range.
In my test, I then wrapped my widget inside a Container of predefined width (400) and height (300), which is not how it looks in the real app, but for the purposes of testing it's much closer - giving a "center" of 195 and 155, when it should be 200 and 150.
The widget I'm testing (in the code, not with the extra Container in my testWidgets) is approximately:
return Center(
child: Container(
key: Key('pin'),
height: 30.0,
width: 30.0,
color: Colors.pink,
),
);
testing widget
flutter position asked Nov 29 '18 at 2:54
MaryMary
1,28811537
add a comment |
How do you get the position of a Widget in a Flutter test? Ideally the center of the widget, but the top left coordinate would be fine too.
This is my test and attempt at a function that finds the location of a Widget on screen.
testWidgets('Pin is in center of screen', (WidgetTester tester) async {
await _setUp(tester); // Does setup
final findPin = find.byKey('pin');
final pinLocation = _getLocation(findPin.evaluate().first);
print(ui.window.physicalSize);
expect(pinLocation.dx, 1200.0);
expect(pinLocation.dy, 900.0);
});
Offset _getLocation(Element element) {
return (element.findRenderObject() as RenderBox).localToGlobal(Offset.zero);
}
The printing for ui.window.physicalSize (where ui is the dart:ui package) tells me the size is Size(2400.0, 1800.0). However, when I set those midpoints in my test, my test fails, saying that the Size is actually 395.0 and 305.0. My widget is only 30.0 x 30.0 in size, and even 395 +/- 30 doesn't equate anything in the 1200 range.
In my test, I then wrapped my widget inside a Container of predefined width (400) and height (300), which is not how it looks in the real app, but for the purposes of testing it's much closer - giving a "center" of 195 and 155, when it should be 200 and 150.
The widget I'm testing (in the code, not with the extra Container in my testWidgets) is approximately:
return Center(
child: Container(
key: Key('pin'),
height: 30.0,
width: 30.0,
color: Colors.pink,
),
);
testing widget
flutter position asked Nov 29 '18 at 2:54
MaryMary
1,28811537
add a comment |
How do you get the position of a Widget in a Flutter test? Ideally the center of the widget, but the top left coordinate would be fine too.
This is my test and attempt at a function that finds the location of a Widget on screen.
testWidgets('Pin is in center of screen', (WidgetTester tester) async {
await _setUp(tester); // Does setup
final findPin = find.byKey('pin');
final pinLocation = _getLocation(findPin.evaluate().first);
print(ui.window.physicalSize);
expect(pinLocation.dx, 1200.0);
expect(pinLocation.dy, 900.0);
});
Offset _getLocation(Element element) {
return (element.findRenderObject() as RenderBox).localToGlobal(Offset.zero);
}
The printing for ui.window.physicalSize (where ui is the dart:ui package) tells me the size is Size(2400.0, 1800.0). However, when I set those midpoints in my test, my test fails, saying that the Size is actually 395.0 and 305.0. My widget is only 30.0 x 30.0 in size, and even 395 +/- 30 doesn't equate anything in the 1200 range.
In my test, I then wrapped my widget inside a Container of predefined width (400) and height (300), which is not how it looks in the real app, but for the purposes of testing it's much closer - giving a "center" of 195 and 155, when it should be 200 and 150.
The widget I'm testing (in the code, not with the extra Container in my testWidgets) is approximately:
return Center(
child: Container(
key: Key('pin'),
height: 30.0,
width: 30.0,
color: Colors.pink,
),
);
testing widget
flutter position asked Nov 29 '18 at 2:54
MaryMary
1,28811537
How do you get the position of a Widget in a Flutter test? Ideally the center of the widget, but the top left coordinate would be fine too.
This is my test and attempt at a function that finds the location of a Widget on screen.
testWidgets('Pin is in center of screen', (WidgetTester tester) async {
await _setUp(tester); // Does setup
final findPin = find.byKey('pin');
final pinLocation = _getLocation(findPin.evaluate().first);
print(ui.window.physicalSize);
expect(pinLocation.dx, 1200.0);
expect(pinLocation.dy, 900.0);
});
Offset _getLocation(Element element) {
return (element.findRenderObject() as RenderBox).localToGlobal(Offset.zero);
}
The printing for ui.window.physicalSize (where ui is the dart:ui package) tells me the size is Size(2400.0, 1800.0). However, when I set those midpoints in my test, my test fails, saying that the Size is actually 395.0 and 305.0. My widget is only 30.0 x 30.0 in size, and even 395 +/- 30 doesn't equate anything in the 1200 range.
In my test, I then wrapped my widget inside a Container of predefined width (400) and height (300), which is not how it looks in the real app, but for the purposes of testing it's much closer - giving a "center" of 195 and 155, when it should be 200 and 150.
The widget I'm testing (in the code, not with the extra Container in my testWidgets) is approximately:
return Center(
child: Container(
key: Key('pin'),
height: 30.0,
width: 30.0,
color: Colors.pink,
),
);
testing widget
flutter position testing widget
flutter position asked Nov 29 '18 at 2:54
MaryMary
1,28811537
asked Nov 29 '18 at 2:54
MaryMary
1,28811537
asked Nov 29 '18 at 2:54
MaryMary
1,28811537
asked Nov 29 '18 at 2:54
MaryMary
1,28811537
asked Nov 29 '18 at 2:54
MaryMary
1,28811537
1,28811537
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
WidgetTester has the methods you are looking for, e.g.:
tester.getCenter(findPin);
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, usedfindPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).
– Mary
Nov 29 '18 at 19:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53531169%2fgetting-the-position-of-a-widget-in-a-flutter-test%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
WidgetTester has the methods you are looking for, e.g.:
tester.getCenter(findPin);
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, usedfindPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).
– Mary
Nov 29 '18 at 19:00
add a comment |
WidgetTester has the methods you are looking for, e.g.:
tester.getCenter(findPin);
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, usedfindPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).
– Mary
Nov 29 '18 at 19:00
add a comment |
WidgetTester has the methods you are looking for, e.g.:
tester.getCenter(findPin);
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
WidgetTester has the methods you are looking for, e.g.:
tester.getCenter(findPin);
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
answered Nov 29 '18 at 11:35
Benno RichtersBenno Richters
9,360143540
9,360143540
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, usedfindPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).
– Mary
Nov 29 '18 at 19:00
add a comment |
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, usedfindPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).
– Mary
Nov 29 '18 at 19:00
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, used
findPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).– Mary
Nov 29 '18 at 19:00
I have no idea why but thought that only the bolded methods in the docs were available. Thanks! I tried this (specifically, used
findPin.at(0)) and got an almost-correct center of 210 when I wrapped my widget around the 400x300 Container. I would've expected the center to be 200. I'll do some more fiddling around. However, when removing that Container (because my real app doesn't have it), I still get a dx of 410 (as opposed to ~1200).– Mary
Nov 29 '18 at 19:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53531169%2fgetting-the-position-of-a-widget-in-a-flutter-test%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
