MaterialApp's MediaQuery is not being passed to showModalBottomSheet

In my example, https://gist.github.com/NebulaFox/573b29c1b3fb88be98bf7bd6ebfe3faa, if I create a fullscreen modal bottom sheet, I cannot use MediaQuery.of(context) as it will not be the one provided by MaterialApp.

Expected results:

MediaQuery.of(context) returns MediaQueryData that contains padding and inset values.

Actual results:

MediaQuery.of(context) returns MediaQueryData that are all zeroed.

flutter doctor -v

[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Mac OS X 10.14.6 18G6032 x86_64,
    locale en-GB)
    • Flutter version 1.23.0-18.1.pre at /usr/local/flutter
    • Framework revision 198df796aa (5 weeks ago), 2020-10-15 12:04:33 -0700
    • Engine revision 1d12d82d9c
    • Dart version 2.11.0 (build 2.11.0-213.1.beta)

[✓] Connected device (3 available)
    • Swift 2 X (mobile) • cad4de42   • android-arm64  • Android 8.1.0 (API 27)
    • Web Server (web)   • web-server • web-javascript • Flutter Tools
    • Chrome (web)       • chrome     • web-javascript • Google Chrome
      86.0.4240.198

@nebulafox

Hi @nebulafox
Can you please share screenshots? I cannot reproduce on beta, there are some values of 34.0
Are you experiencing it on physical or simulator or android?

code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "$mediaQuery",
              textAlign: TextAlign.center,
            ),
            ElevatedButton(
                child: Text("SHOW MODAL"),
                onPressed: () {
                  showModalBottomSheet<void>(
                      context: context,
                      isScrollControlled: true,
                      builder: (context) {
                        return MediaQueryFullScreen();
                      });
                })
          ],
        ),
      ),
    );
  }
}

class MediaQueryFullScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return SafeArea(
        minimum: EdgeInsets.all(16.0),
        child: Center(
          child: Text(
            "$mediaQuery",
            textAlign: TextAlign.center,
          ),
        ));
  }
}

flutter doctor -v

[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on macOS 11.0.1 20B29 x86_64, locale
    en-GB)
    • Flutter version 1.23.0-18.1.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision 198df796aa (5 weeks ago), 2020-10-15 12:04:33 -0700
    • Engine revision 1d12d82d9c
    • Dart version 2.11.0 (build 2.11.0-213.1.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios
      • iOS 14.2
    • iPhone 12 (mobile)     • B46BCEDD-9601-4CD0-8D0B-CE4EF96ACD93 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)
    • Web Server (web)       • web-server                           •
      web-javascript • Flutter Tools
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 86.0.4240.198

• No issues found!

@TahaTesser

I can see my issue in @TahaTesser screenshots - that fact that the top value of padding and insets are set zero. It appears for iOS that the bottom value of padding and insets is set.

code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "$mediaQuery",
              textAlign: TextAlign.center,
            ),
            ElevatedButton(
              child: Text("SHOW MODAL"),
              onPressed: () {
                showModalBottomSheet<void>(
                  context: context,
                  isScrollControlled: true,
                  builder: (context) {        
                    return MediaQueryFullScreen();
                  }
                );
              }
            )
          ],
        ),
      ),

    );
  }
}

class MediaQueryFullScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return SafeArea(
      minimum: EdgeInsets.all(16.0),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("$mediaQuery", textAlign: TextAlign.center,),
            ElevatedButton(
              child: Text("HIDE MODAL"),
              onPressed: () {
                Navigator.of(context).pop();
              }
            )
          ],
        ),
      )
    );
  }
}

@nebulafox

Hi @nebulafox
That's a good point, thanks for confirming, I can also see behaviour on Android, outputs are different between two platforms

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on macOS 11.0.1 20B29 darwin-x64, locale en-GB)
    • Flutter version 1.22.4 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 1aafb3a8b9 (7 days ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (1 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 10 (API 29)

! Doctor found issues in 1 category.

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on macOS 11.0.1 20B29 darwin-x64, locale en-GB)
    • Flutter version 1.24.0-10.2.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision 022b333a08 (35 hours ago), 2020-11-18 11:35:09 -0800
    • Engine revision 07c1eed46b
    • Dart version 2.12.0 (build 2.12.0-29.10.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • Web Server (web) • web-server       • web-javascript • Flutter Tools
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 87.0.4280.67

• No issues found!

[✓] Flutter (Channel master, 1.24.0-8.0.pre.321, on macOS 11.0.1 20B29 darwin-x64, locale en-GB)
    • Flutter version 1.24.0-8.0.pre.321 at /Users/tahatesser/Code/flutter_master
    • Framework revision 05dadb0120 (5 hours ago), 2020-11-20 07:33:05 +0530
    • Engine revision a0da844845
    • Dart version 2.12.0 (build 2.12.0-50.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 11.0.1 20B29 darwin-x64
    • Web Server (web) • web-server       • web-javascript • Flutter Tools
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 87.0.4280.67

• No issues found!

This might why these issues having problems with safe area #39205 #48677

As I comented in #48677 when you create another MaterialApp you are able to retrieve SafeArea.

Hi. This is still an issue

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

MaterialApp's MediaQuery is not being passed to showModalBottomSheet #70701

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

MaterialApp's MediaQuery is not being passed to showModalBottomSheet #70701

Description

Activity

TahaTesser commented on Nov 18, 2020

HeliumEnd commented on Nov 19, 2020

TahaTesser commented on Nov 20, 2020

ThiagoFontes commented on Dec 7, 2020

vasilich6107 commented on May 22, 2021

github-actions commented on Aug 4, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions