Skip to content

Bottom notch (iPhone X) not avoided by SafeArea when the Keyboard is open #29941

@Koridev

Description

@Koridev

Steps to Reproduce

The padding added by a SafeArea or calculated with a MediaQuery, correctly takes the bottom notch of an iPhone X style phone into account when the keyboard is closed.

But if the keyboard is open when the Scaffold have its parameter resizeToAvoidBottomInset set to false, the height of the bottom notch is not taken into account in the SafeArea, making the whole page shift down the size of the bottom notch.

I think the correct behavior for SafeArea/MediaQuery should be to still have a padding.bottom value the height of the notch to avoid inconsistency of the total available height depending on the keyboard state.

Example project:

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

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

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: TextField(),
        ),
        body: Column(children: <Widget>[
          Expanded(child: Container(color: Colors.white,),),
          Expanded(child: Container(color: Colors.red,),)
        ],),
      ),
    );
  }
}

When clicking on the TextField to open the keyboard, the whole content of the Scaffold body will shift down since the SafeArea is not compensating for the notch anymore.

Logs

Flutter doctor:

[✓] Flutter (Channel beta, v1.3.8, on Mac OS X 10.14.3 18D109, locale en-JP)
    • Flutter version 1.3.8 at /Users/guillaume/flutter
    • Framework revision e5b1ed7a7f (3 weeks ago), 2019-03-06 14:23:37 -0800
    • Engine revision f4951df193
    • Dart version 2.2.1 (build 2.2.1-dev.0.0 571ea80e11)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/guillaume/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.9.4
    • CocoaPods version 1.6.0

[✓] Android Studio (version 3.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 33.4.1
    • Dart plugin version 182.5215
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

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

[✓] Connected device (2 available)
    • iPhone 6  • 1F54E7BF-0551-4AEB-9CD8-F63C502A842A • ios • iOS 12.1 (simulator)
    • iPhone XS • 46D10895-1001-4801-9F7A-D65659B06914 • ios • iOS 12.1 (simulator)

• No issues found!

Metadata

Metadata

Assignees

Labels

customer: solarisframeworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions