MediaQuery viewInsets are incorrect when the iPad mini keyboard first opens #68731

fbcouch · 2020-10-21T18:15:56Z

Steps to Reproduce

Run flutter create bug.
Update the files as follows:

main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      builder: (context, child) {
        // print(MediaQuery.of(context).viewInsets);
        return child;
      },
      home: HomePadding(),
    );
  }
}

class HomePadding extends StatelessWidget {
  const HomePadding({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = EdgeInsets.only(bottom: data.viewInsets.bottom);

    return Material(
      color: Colors.white,
      child: Padding(
        padding: padding,
        child: Container(
          color: Colors.blue,
          child: Column(
            children: [
              Expanded(
                child: Container(),
              ),
              Container(
                color: Colors.red,
                child: TextField(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Run in an iPad simulator (currently using iOS 13.5)
Tap to focus on the text input (red background)
Pinch to zoom on the keyboard to open the mini keyboard (viewInsets.bottom changes to zero as expected)
Press 'Done' to close the keyboard
Tap to focus on the text input (red background)

Expected results: viewInsets.bottom should be zero since the mini keyboard is floating above the app

Actual results: viewInsets.bottom has the size of the mini keyboard until it is moved (the white area at the bottom of the screen is the viewInsets.bottom)

Logs

flutter run --verbose

$ flutter analyze
Analyzing ipad_mini_keyboard_issue...                                   
No issues found! (ran in 2.0s)

$ flutter doctor -v
[✓] Flutter (Channel unknown, 1.22.2, on Mac OS X 10.15.6 19G2021, locale en-US)
    • Flutter version 1.22.2 at /Users/jami/flutter
    • Framework revision 84f3d28555 (6 days ago), 2020-10-15 16:26:19 -0700
    • Engine revision b8752bbfff
    • Dart version 2.10.2

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0-rc2)
    • Android SDK at /Users/jami/Library/Android/sdk
    • Platform android-29, build-tools 29.0.0-rc2
    • ANDROID_HOME = /Users/jami/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[!] IntelliJ IDEA Ultimate Edition (version 2019.2.4)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

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

[✓] Connected device (2 available)
    • Twin’s iPhone (mobile)                         • 4fd72287672c57a0d967960630acbd9bbed25bb5 • ios • iOS 12.3.1
    • iPad Pro (12.9-inch) (4th generation) (mobile) • DBEA6C3F-9D2E-4D15-8BAC-5320874F384E     • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)

! Doctor found issues in 1 category.

The text was updated successfully, but these errors were encountered:

darshankawar · 2020-10-22T08:19:52Z

@fbcouch
I am unable to carry out step # 5 (Pinch to zoom on the keyboard to open the mini keyboard (viewInsets.bottom changes to zero as expected). How do you do that on iPad simulator ? I tried on iPad Pro and iPad 8th gen.

fbcouch · 2020-10-22T12:27:00Z

With the full keyboard up, hold Option, position the cursor handles a reasonable distance apart horizontally.
While holding option, hold shift as well and move the cursor so that both handles are over the keyboard.
Release shift.
Press the main mouse button and drag inward until the keyboard collapses to the mini keyboard.

darshankawar · 2020-10-22T13:31:37Z

@fbcouch Thanks for the steps. I was able to replicate it on iPad 8th gen.

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.4 19E2269, locale en-IN)
    • Flutter version 1.22.2 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 84f3d28555 (7 days ago), 2020-10-15 16:26:19 -0700
    • Engine revision b8752bbfff
    • Dart version 2.10.2

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • 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-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

fbcouch · 2022-04-08T21:30:10Z

Just an update here – this is still an issue in flutter 2.10.4

maheshmnj · 2022-12-28T00:47:01Z

Hi @fbcouch, I verified the issue on the latest master 3.7 and I see the bottom offsets for a floating keyboard is correctly returned as zero.

Screen.Recording.2022-12-27.at.7.43.28.PM.mov

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      builder: (BuildContext context, Widget? child) {
        print(MediaQuery.of(context).viewInsets);
        return child!;
      },
      home: const HomePadding(),
    );
  }
}

class HomePadding extends StatelessWidget {
  const HomePadding({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = EdgeInsets.only(bottom: data.viewInsets.bottom);

    return Material(
      color: Colors.white,
      child: Padding(
        padding: padding,
        child: Container(
          color: Colors.blue,
          child: Column(
            children: [
              Expanded(
                child: Container(),
              ),
              Container(
                color: Colors.red,
                child: TextField(
                  onTap: () {
                    print(MediaQuery.of(context).viewInsets);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

logs

flutter: EdgeInsets.zero
flutter: EdgeInsets(0.0, 0.0, 0.0, 408.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 383.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 349.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 307.9)
flutter: EdgeInsets(0.0, 0.0, 0.0, 271.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 235.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 203.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 175.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 151.9)
flutter: EdgeInsets(0.0, 0.0, 0.0, 133.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 117.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 104.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 93.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 85.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 78.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 73.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 69.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 66.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 63.6)
flutter: EdgeInsets(0.0, 0.0, 0.0, 61.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 60.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 58.9)
flutter: EdgeInsets(0.0, 0.0, 0.0, 58.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 57.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 56.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 56.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 56.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 55.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 55.6)
flutter: EdgeInsets(0.0, 0.0, 0.0, 55.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 55.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 55.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 55.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 53.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 48.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 42.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 36.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 30.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 25.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 20.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 16.6)
flutter: EdgeInsets(0.0, 0.0, 0.0, 13.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 10.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 8.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 6.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 5.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 4.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 3.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 2.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 1.9)
flutter: EdgeInsets(0.0, 0.0, 0.0, 1.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 1.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.9)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.1)
flutter: EdgeInsets.zero
flutter: EdgeInsets.zero
flutter: EdgeInsets(0.0, 0.0, 0.0, 0.6)
flutter: EdgeInsets(0.0, 0.0, 0.0, 18.6)
flutter: EdgeInsets(0.0, 0.0, 0.0, 56.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 100.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 145.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 190.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 228.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 261.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 288.6)
flutter: EdgeInsets(0.0, 0.0, 0.0, 311.9)
flutter: EdgeInsets(0.0, 0.0, 0.0, 331.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 347.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 360.5)
flutter: EdgeInsets(0.0, 0.0, 0.0, 370.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 378.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 385.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 390.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 394.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 397.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 399.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 401.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 403.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 404.2)
flutter: EdgeInsets(0.0, 0.0, 0.0, 405.1)
flutter: EdgeInsets(0.0, 0.0, 0.0, 405.8)
flutter: EdgeInsets(0.0, 0.0, 0.0, 406.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 406.7)
flutter: EdgeInsets(0.0, 0.0, 0.0, 407.0)
flutter: EdgeInsets(0.0, 0.0, 0.0, 407.3)
flutter: EdgeInsets(0.0, 0.0, 0.0, 407.4)
flutter: EdgeInsets(0.0, 0.0, 0.0, 408.0)
flutter: EdgeInsets.zero
flutter: EdgeInsets.zero
flutter: EdgeInsets.zero
flutter: EdgeInsets.zero
flutter: EdgeInsets.zero

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
      to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Closing as fixed, In case you still encounter the issue, then please feel free to write in the comments and we will reopen it.

Thank you.

github-actions · 2023-03-04T17:01:26Z

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.

darshankawar added in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Oct 22, 2020

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Oct 22, 2020

maheshmnj closed this as completed Dec 28, 2022

maheshmnj added the r: fixed Issue is closed as already fixed in a newer version label Dec 28, 2022

github-actions bot locked as resolved and limited conversation to collaborators Mar 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MediaQuery viewInsets are incorrect when the iPad mini keyboard first opens #68731

MediaQuery viewInsets are incorrect when the iPad mini keyboard first opens #68731

fbcouch commented Oct 21, 2020

darshankawar commented Oct 22, 2020

fbcouch commented Oct 22, 2020

darshankawar commented Oct 22, 2020

fbcouch commented Apr 8, 2022

maheshmnj commented Dec 28, 2022

github-actions bot commented Mar 4, 2023

MediaQuery viewInsets are incorrect when the iPad mini keyboard first opens #68731

MediaQuery viewInsets are incorrect when the iPad mini keyboard first opens #68731

Comments

fbcouch commented Oct 21, 2020

Steps to Reproduce

darshankawar commented Oct 22, 2020

fbcouch commented Oct 22, 2020

darshankawar commented Oct 22, 2020

fbcouch commented Apr 8, 2022

maheshmnj commented Dec 28, 2022

github-actions bot commented Mar 4, 2023