Skip to content

Safe area with keyboard showing has excess padding above the keyboard on iPhone X #15947

@KevinTheGray

Description

@KevinTheGray

On phones that have a "Safe Area" at the bottom, such as the iPhone X, the safe area seems to still be respected even when the keyboard shows.

This behavior can be seen with the following build method:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Safe Area Test"),
      ),
      body: new Builder(
        builder: (BuildContext context) {
          return new SafeArea(
            child: new Stack(
              children: <Widget>[
                new Positioned(
                  left: 0.0,
                  right: 0.0,
                  bottom: 0.0,
                  height: 60.0,
                  child: new Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: 10.0, horizontal: 5.0),
                    color: Colors.yellow,
                    child: new Center(
                      child: new Container(
                        decoration: new BoxDecoration(
                          color: Colors.white,
                          borderRadius: new BorderRadius.circular(20.0),
                        ),
                        padding: const EdgeInsets.only(left: 10.0, right: 0.0),
                        height: 50.0,
                        child: new Row(
                          children: <Widget>[
                            new Expanded(
                              child: new TextField(
                                decoration: new InputDecoration(
                                  border: InputBorder.none,
                                ),
                              ),
                            ),
                            new Container(
                              width: 40.0,
                              height: 40.0,
                              child: new Material(
                                borderRadius: new BorderRadius.circular(20.0),
                                type: MaterialType.transparency,
                                child: new IconButton(
                                  onPressed: () {
                                  },
                                  icon: new Icon(Icons.arrow_upward),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

And an image of the described issue:
screen shot 2018-03-26 at 3 34 12 pm

Steps to Reproduce

  • Build a screen with a safe area and a text field aligned to the bottom, the sample code above has it.
  • Click into the textfield so the keyboard appears
  • See described issue

Logs

flutter run

Launching lib/main.dart on iPhone X in debug mode...
Syncing files to device iPhone X...                          2.1s

🔥  To hot reload your app on the fly, press "r". To restart the app entirely, press "R".
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:8100/
For a more detailed help message, press "h". To quit, press "q".

flutter analyze

Analyzing /Users/KG/Developer/Mine/testing_safe_to_delete_all_contents/keyboard_safe_area_test...
No issues found!
Ran in 6.2s

Flutter Doctor

[✓] Flutter (Channel master, v0.2.5-pre.41, on Mac OS X 10.12.6 16G1212, locale en-US)
    • Flutter version 0.2.5-pre.41 at /Users/KG/Developer/Flutter/flutter
    • Framework revision 2171fcb882 (2 days ago), 2018-03-25 00:04:24 -0700
    • Engine revision 6280adbfb1
    • Dart version 2.0.0-dev.39.0.flutter-06949dc985

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/KG/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = /Users/KG/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_152-release-915-b08)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    • ios-deploy 1.9.2
    • CocoaPods version 1.3.1

[✓] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio 3.0RC2.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] IntelliJ IDEA Community Edition (version 2017.2.7)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 21.2.2
    • Dart plugin version 172.4343.25

[✓] VS Code (version 1.21.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Dart Code extension version 2.10.0

Metadata

Metadata

Assignees

Labels

a: qualityA truly polished experienceplatform-iosiOS applications specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions