2

Short Description

Adding a flutter fragment to an existing Android app is adding extra padding at the bottom when the keyboard is displayed.

Description

If a flutter fragment is imported into an android app & the fragment is not full screen (e.g. a screen with bottom navigation bar), opening a keyboard adds an additional padding in flutter.

Here's the basic layout

Here's the issue, which is driving us crazy.

Android without flutter Flutter fragment in android with keyboard closed Flutter fragment in android with keyboard open

Bigger images

  1. https://i.stack.imgur.com/Gptqd.png
  2. https://i.stack.imgur.com/Qpau0.png
  3. https://i.stack.imgur.com/0rluD.png

Image three shows the padding between the keyboard and the text field. It is clearly coming from flutter (as it is white). It is always the same height, as the distance from the end of the fragment to the end of the screen.

Android's keyboard input visibility doesn't help. We know of resizeToAvoidBottomInset, but using this will cut off text fields and won't scroll the active one into the view, which is what we want.

Is there some option in Android or Flutter which fixes this issue or is it a bug in the flutter framework?

Example

A minimal working example on github was created. It includes a small flutter fragment + an android example (File > New > New Project > Bottom Navigation Activity). I followed the instructions provided by the flutter docs

flutter doctor

[√] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.19044.1415], locale en-AT)
    • Flutter version 2.8.0 at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (5 weeks ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\user\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.10+0-b96-7249189)

[√] VS Code (version 1.63.2)
    • VS Code at C:\Users\user\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.32.0

[√] Connected device (3 available)
    • Pixel 4a (mobile) •                • android-arm64  • Android 12 (API 31)
    • Chrome (web)      • chrome         • web-javascript • Google Chrome 96.0.4664.110
    • Edge (web)        • edge           • web-javascript • Microsoft Edge 96.0.1054.62

• No issues found!
DarkMikey
  • 383
  • 1
  • 4
  • 24
  • I've opened a Flutter bug ticket on their github. Let's see if they acknowledge it as a bug. https://github.com/flutter/flutter/issues/96520 – DarkMikey Jan 14 '22 at 09:37
  • 3
    Finally they acknowledged it as a bug. Now it safely can be labeled with `p6` and never fixed, but I can peacefully carry on with my life now... – DarkMikey Jan 18 '22 at 15:34

0 Answers0