It is impossible to make overlay widget move up when keyboard shows

balaji101010 commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues
[X] I have read the guide to filing a bug

Steps to reproduce

Just run the following code

Add a overlay widget with textfield and enter something

Whatever I do I can't make the overlay widget top of the keyboard

This is SERIOUS issue in flutter

Expected results

the overlay widget should be above the keyboard

Actual results

https://ibb.co/NjNYZd6

Code sample

import 'package:flutter/material.dart';

class OverLayWidget extends StatefulWidget {
  const OverLayWidget({super.key});

  @override
  State<OverLayWidget> createState() => _OverLayWidgetState();
}

class _OverLayWidgetState extends State<OverLayWidget> {
  List<GlobalKey> keys = List.generate(25, (index) => GlobalKey());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisSpacing: 32,
            crossAxisSpacing: 32,
            mainAxisExtent: 120),
        itemBuilder: (_, int pos) {
          return _Item(
            index: pos,
            itemKey: keys[pos],
          );
        },
        itemCount: keys.length,
      ),
    );
  }
}

class _Item extends StatefulWidget {
  final GlobalKey itemKey;

  final int index;

  const _Item({super.key, required this.itemKey, required this.index});

  @override
  State<_Item> createState() => _ItemState();
}

class _ItemState extends State<_Item> {
  final LayerLink _layerLink = LayerLink();

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        show();
      },
      child: CompositedTransformTarget(
          link: _layerLink,
          child: Container(
            key: widget.itemKey,
            color: widget.index % 2 == 0 ? Colors.black : Colors.grey,
          )),
    );
  }

  void show() {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      overlayEntry = _createOverlay();
      overlayState.insert(overlayEntry);
    });
  }

  OverlayEntry _createOverlay() {
    RenderBox renderBox = context.findRenderObject() as RenderBox;

    var size = renderBox.size;
    return OverlayEntry(
        builder: (context) => Positioned(
              width: 200,
              child: CompositedTransformFollower(
                link: _layerLink,
                showWhenUnlinked: false,
                offset: Offset(0.0, size.height),
                child: Material(
                  elevation: 5.0,
                  child: Container(
                    color: Colors.cyan,
                    child: const TextField(
                      decoration: InputDecoration(hintText: 'Enter Something'),
                    ),
                  ),
                ),
              ),
            ));
  }
}

Screenshots or Video

https://ibb.co/NjNYZd6

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor output

```console Doctor summary (to see all details, run flutter doctor -v): [!] Flutter (Channel stable, 3.10.5, on macOS 13.2.1 22D68 darwin-arm64, locale en-US) ! Warning: `dart` on your path resolves to /usr/local/Cellar/dart/2.18.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/gurudharan/Downloads/flutter. Consider adding /Users/gurudharan/Downloads/flutter/bin to the front of your path. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 14.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.3) [✓] Android Studio (version 2022.3) [✓] VS Code (version 1.81.1) [✓] Connected device (3 available) [✓] Network resources ! Doctor found issues in 1 category. ```

dam-ease commented 1 year ago

Hi @balaji101010. Thanks for filing this issue. I am able to reproduce this but can you try this community package and see if it helps in your use case: https://pub.dev/packages/never_behind_keyboard

balaji101010 commented 1 year ago

I have tried it!!. but no luck @dam-ease

dam-ease commented 1 year ago

Thanks for your response. I am able to reproduce this on the latest master and stable channels.

Actual Result	Expected Result

Code Sample

```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const OverLayWidget(), ); } } class OverLayWidget extends StatefulWidget { const OverLayWidget({super.key}); @override State createState() => _OverLayWidgetState(); } class _OverLayWidgetState extends State { List keys = List.generate(25, (index) => GlobalKey()); @override Widget build(BuildContext context) { return Scaffold( body: GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, mainAxisSpacing: 32, crossAxisSpacing: 32, mainAxisExtent: 120), itemBuilder: (_, int pos) { return _Item( index: pos, itemKey: keys[pos], ); }, itemCount: keys.length, ), ); } } class _Item extends StatefulWidget { final GlobalKey itemKey; final int index; const _Item({super.key, required this.itemKey, required this.index}); @override State<_Item> createState() => _ItemState(); } class _ItemState extends State<_Item> { final LayerLink _layerLink = LayerLink(); @override Widget build(BuildContext context) { return InkWell( onTap: () { show(); }, child: CompositedTransformTarget( link: _layerLink, child: Container( key: widget.itemKey, color: widget.index % 2 == 0 ? Colors.black : Colors.grey, )), ); } void show() { OverlayState overlayState = Overlay.of(context); OverlayEntry overlayEntry; WidgetsBinding.instance.addPostFrameCallback((_) { overlayEntry = _createOverlay(); overlayState.insert(overlayEntry); }); } OverlayEntry _createOverlay() { RenderBox renderBox = context.findRenderObject() as RenderBox; var size = renderBox.size; return OverlayEntry( builder: (context) => Positioned( width: 200, child: CompositedTransformFollower( link: _layerLink, showWhenUnlinked: false, offset: Offset(0.0, size.height), child: Material( elevation: 5.0, child: Container( color: Colors.cyan, child: const TextField( decoration: InputDecoration(hintText: 'Enter Something'), ), ), ), ), )); } } ```

stable, master flutter doctor -v

``` [✓] Flutter (Channel stable, 3.13.2, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.13.2 on channel stable at /Users/damilolaalimi/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ff5b5b5fa6 (8 days ago), 2023-08-24 08:12:28 -0500 • Engine revision b20183e040 • Dart version 3.1.0 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • iPhone 14 (mobile) • 1A122DE2-0CAB-4C3E-A395-691BF27D626F • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.140 [✓] Network resources • All expected network resources are available. • No issues found! ``` ``` [!] Flutter (Channel master, 3.14.0-13.0.pre.68, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.14.0-13.0.pre.68 on channel master at /Users/damilolaalimi/fvm/versions/master ! Warning: `flutter` on your path resolves to /Users/damilolaalimi/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/damilolaalimi/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4324d2112e (53 minutes ago), 2023-09-01 02:45:32 -0400 • Engine revision 0769aba5b7 • Dart version 3.2.0 (build 3.2.0-128.0.dev) • DevTools version 2.27.0 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (5 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • iPhone 14 (mobile) • EDD62579-BA84-4339-BDA7-E870040C507A • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • iPhone 14 (mobile) • 1A122DE2-0CAB-4C3E-A395-691BF27D626F • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.140 [!] Network resources ✗ An HTTP error occurred while checking "https://pub.dev/": Connection closed before full header was received ! Doctor found issues in 2 categories. ```

OneupLee commented 1 year ago

Is there any solution?

LongCatIsLooong commented 1 year ago

The iOS keyboard is a UIKit view (iirc it's in a different UIWindow) so drawing before that window could be challenging. Deferring to the platform teams for feasibility.

flutter-triage-bot[bot] commented 1 year ago

The triaged-design label is irrelevant if there is no team-design label or fyi-design label.

stuartmorgan commented 1 year ago

iOS does not generally support drawing over the keyboard; it's not something we would add support for in Flutter itself.

Once multi-view support is available in Flutter, someone could make a third-party plugin that creates a new UIView containing Flutter content and attempts to force that view above the keyboard.

stuartmorgan commented 1 year ago

Re-opening for consideration on Android; I don't know if Android allows this as a standard behavior (in which case it could potentially be built with multi-view.

(Adding team-framework since this has no team now, and if it were implemented in Flutter itself it would likely be driven from the framework side.)

gmackall commented 1 year ago

From android triage: @balaji101010 by on top, do you mean covering the content of the keyboard?

It is not expected behavior for the keyboard to be covered.

balaji101010 commented 1 year ago

no not covered, the textfield has to go above the keyboard! @gmackall

stuartmorgan commented 1 year ago

In that case, the retitling above was incorrect; I've restored the original title, and I'll hide the comments that were suggesting it was about actually putting Flutter content in the keyboard area (including the triage screenshot of a context menu).

LongCatIsLooong commented 1 year ago

If you're creating your own OverlayEntry you should be able to position your OverlayEntry's contents to avoid the keyboard based on the current MediaQueryData.viewInsets value.

balaji101010 commented 1 year ago

hmm. I don't know how to do that!, the scrollview is not moving up