Skip to content

Keyboard transition shows Scaffold background color #97054

Closed
Closed
Keyboard transition shows Scaffold background color#97054
Labels
a: text inputEntering text in a text field or keyboard related problemsfound in release: 2.8Found to occur in 2.8found in release: 2.9Found to occur in 2.9frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: duplicateIssue is closed as a duplicate of an existing issue

Description

@Andrflor
Andrflor
opened on Jan 22, 2022

Code to Reproduce

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: SingleChildScrollView(
        child: Container(
            color: Colors.white,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Column(
              children: [
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
                TextFormField(),
              ],
            )),
      ),
    );
  }

Step to reproduce

Click any field that will be underneath the keyboard and you should see the background color appearing.
You will see it even better when the keyboard closes.

Demo

Like here you can see that the scaffold color is appearing instead of being transparent

Activity

  1. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Jan 24, 2022

  2. maheshj01 commented on Jan 24, 2022

    @maheshj01
    maheshj01
    on Jan 24, 2022
    Member

    Hi @Andrflor, Thanks for filing the issue. I am able to reproduce the same behavior on the stable and the master channel. When closing the keyboard scaffold background color is shown. Not sure if this is intended this happens on both IOS and Android

    Android IOS
    Screen.Recording.2022-01-24.at.3.30.39.PM.mov
    Screen.Recording.2022-01-24.at.3.48.04.PM.mov
    flutter doctor -v 
    [✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.8.1 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (3 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.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.8+10-b944.6916264)

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

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.3:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 13 Pro (mobile) • 0FA2FB93-2A89-4FDB-8293-DF66188F1E54 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0
      (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 96.0.4664.110

• No issues found!

    [✓] Flutter (Channel master, 2.9.0-1.0.pre.427, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.427 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6eb3400dc1 (3 days ago), 2022-01-20 20:25:16 -0500
    • Engine revision cd65368f9d
    • Dart version 2.17.0 (build 2.17.0-31.0.dev)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.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.8+10-b944.6916264)

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

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

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.3:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 97.0.4692.99

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

• No issues found!

    cc: @justinmc

  3. maheshj01
    closed this as completedon Jan 24, 2022
  4. maheshj01
    reopened this on Jan 24, 2022
  5. maheshj01
    added
    a: text inputEntering text in a text field or keyboard related problems
    found in release: 2.8Found to occur in 2.8
    found in release: 2.9Found to occur in 2.9
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    and removed
    in triagePresently being triaged by the triage team
    on Jan 24, 2022
  6. maheshj01
    changed the title [-]Keyboard transition show Scaffold background color[/-] [+]Keyboard transition shows Scaffold background color[/+] on Jan 24, 2022
  7. HansMuller
    added
    p: material_uimaterial_ui package in flutter/packages
    on Jan 24, 2022

  8. HansMuller commented on Jan 24, 2022

    @HansMuller
    HansMuller
    on Jan 24, 2022
    Contributor

    This may be an example of a known problem with antialiasing and mapping from logical pixels to device pixels. There's an open issue for a documentation fix: #14288

    More info about the problem can be found here:
    #14288 (comment)
    #17084 (comment)
    #15035 (comment)

  9. maheshj01 commented on Jan 25, 2022

    @maheshj01
    maheshj01
    on Jan 25, 2022
    Member

    Closing as duplicate of #14288

  10. maheshj01
    closed this as completedon Jan 25, 2022
  11. maheshj01
    added
    r: duplicateIssue is closed as a duplicate of an existing issue
    on Jan 25, 2022

  12. github-actions commented on Feb 8, 2022

    @github-actions
    github-actionsbot
    on Feb 8, 2022

    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.

  13. github-actions
    locked as resolved and limited conversation to collaborators on Feb 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: text inputEntering text in a text field or keyboard related problemsfound in release: 2.8Found to occur in 2.8found in release: 2.9Found to occur in 2.9frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: duplicateIssue is closed as a duplicate of an existing issue

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions