Flutter 小部件测试：未应用 MediaQuery 设置填充

Question

Since flutter's testing environment does not contain system status bar like the emulator, I would like to add padding at the top using MediaQuery .

Here's my testing code:

void main() {
  testWidgets('MediaQuery padding test', (WidgetTester tester) async {
    const double statusBarHeight = 24.0;

    await tester.pumpWidget(
      MaterialApp(
        home: MediaQuery(
          data: const MediaQueryData(
            viewInsets: EdgeInsets.only(top: statusBarHeight),
          ),
          child: Scaffold(
            appBar: AppBar(
              title: const Text('PopupMenu Test'),
            ),
              
          ),
        ),
      ),
    );

    expect(find.byType(AppBar), findsOneWidget);
    expect(tester.getTopLeft(find.byType(AppBar)).dy, windowPaddingTop);
  });
}

Since I added 24.0 of top padding using MediaQueryData.viewInsets , I expected the AppBar top left y axis is 24.0 , but the result is zero.
I have also tried testing with viewPadding instead of viewInsets , but it has produced the same result.

I want to know the reason why top padding is not applied in my test, and how to solve this problem. I would appreciate any help. Thanks.

Answer 1

Old answer:
[You are not supposed to use MediaQuery and Scaffold this way. MediaQuery should not be inside the widget tree and, use it to retrieve media data. Scaffold should cover the entire screen]

Updating(based on the answer in the comments):

They are using MediaQuery to simulate non-safe area, like the notch in some mobile. This is used only to teste the scaffold widget against invading the safe are (like the notch).

If you just want to test, the error is here:

viewInsets: EdgeInsets.only(top: statusBarHeight),

It should be viewPadding intead of viewInsets:

viewPadding: EdgeInsets.only(bottom: viewPadding),

Now if you are trying to build a screen instead of test one, you don't need (and shall not) to use MediaQuery. Just use your Scaffold as the root widget.