Android Web keyboard dismissal leaves viewport squished (Flutter bug)

Summary

On Android Web (Chrome), when the soft keyboard is dismissed, the viewport does not resize back to its original size. This leaves the app "squished" at the top of the screen with empty space where the keyboard was.

Environment

• Platform: Android Web (Chrome browser)
• Flutter Version: 3.24.x
• Affected Apps: Pro app, Client app

Steps to Reproduce

1. Open the app in Chrome on an Android device
2. Tap on any text input field (e.g., login screen, chat input)
3. The keyboard appears and the viewport shrinks correctly
4. Dismiss the keyboard (tap outside the field or press back)
5. Bug: The viewport remains squished at the reduced height

Expected Behavior

When the keyboard is dismissed, the viewport should resize back to full screen height.

Actual Behavior

The viewport stays at the reduced height, leaving empty white/black space at the bottom of the screen where the keyboard was.

Root Cause

This is a known Flutter framework bug affecting Android Web:

• Flutter Issue: https://github.com/flutter/flutter/issues/175074

Flutter's web renderer does not properly detect keyboard dismissal on Android and fails to resize the viewport back.

Attempted Workarounds (Partial Success)

1. JavaScript viewport reset (index.html)

Added a script to detect viewport changes and force reset:

(function() {
  var isAndroid = /Android/i.test(navigator.userAgent);
  if (isAndroid && window.visualViewport) {
    var initialHeight = window.innerHeight;
    
    function checkAndResetViewport() {
      var currentVVHeight = window.visualViewport.height;
      if (currentVVHeight >= initialHeight * 0.9) {
        document.body.style.height = '100vh';
        document.body.style.minHeight = '100vh';
        var flutterView = document.querySelector('flt-glass-pane');
        if (flutterView) {
          flutterView.style.height = '100vh';
        }
      }
    }
    
    window.visualViewport.addEventListener('resize', checkAndResetViewport);
    setInterval(checkAndResetViewport, 500);
    document.addEventListener('focusout', function(e) {
      setTimeout(checkAndResetViewport, 300);
    });
  }
})();

2. Disable resizeToAvoidBottomInset on Android Web

// In Scaffold
resizeToAvoidBottomInset: PlatformUtil.shouldResizeForKeyboard(context),

// PlatformUtil helper
static bool shouldResizeForKeyboard(BuildContext context) {
  if (kIsWeb && Platform.isAndroid) {
    return false; // Disable on Android Web
  }
  return true;
}

Result: These workarounds help in some cases but don't fully resolve the issue. The Flutter framework needs to fix the underlying viewport resize detection.

Impact

• Critical UX issue: Users cannot see the full app after using any text input
• Affects all text inputs: Login, chat, forms, search, etc.
• No reliable workaround: Users must refresh the page to reset

Recommended Action

1. Track upstream Flutter issue: https://github.com/flutter/flutter/issues/175074
2. Consider alternative input handling for Android Web
3. Add user-facing message about known limitation until Flutter fixes

Related Files

• apps/pro/web/index.html - JavaScript workaround
• packages/homeguild_common/lib/utils/platform_util.dart - Platform detection helper
• apps/pro/lib/app/screens/login/login_screen.dart - Example affected screen