Constrain RawAutocomplete options by soft keyboard by victorsanni · Pull Request #163868 · flutter/flutter

victorsanni · 2025-02-21T17:47:27Z

Fixes Autocomplete options overlay should automatically moves up when soft keyboard is visible

Before

before.soft.keyboard.mov

After

Screen.Recording.2025-02-28.at.4.04.29.PM.mov

Sample code

import "package:flutter/material.dart";

void main() => runApp(const AutocompleteExampleApp());

/// Flutter code sample for [RawAutocomplete].

class AutocompleteExampleApp extends StatelessWidget {
  const AutocompleteExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("RawAutocomplete Basic"),
        ),
        body: const CustomScrollView(
          slivers: [
            SliverPadding(padding: EdgeInsets.symmetric(vertical: 300)),
            SliverToBoxAdapter(child: AutocompleteBasicExample()),
            SliverPadding(padding: EdgeInsets.symmetric(vertical: 700)),
          ],
        ),
      ),
    );
  }
}

class AutocompleteBasicExample extends StatelessWidget {
  const AutocompleteBasicExample({super.key});

  static const List<String> _options = <String>[
    "aardvark",
    "bobcat",
    "chameleon",
    "chameleon",
  ];

  @override
  Widget build(BuildContext context) {
    return RawAutocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        return _options.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      fieldViewBuilder: (
        BuildContext context,
        TextEditingController textEditingController,
        FocusNode focusNode,
        VoidCallback onFieldSubmitted,
      ) {
        return TextFormField(
          controller: textEditingController,
          focusNode: focusNode,
          onFieldSubmitted: (String value) {
            onFieldSubmitted();
          },
        );
      },
      optionsViewBuilder: (
        BuildContext context,
        AutocompleteOnSelected<String> onSelected,
        Iterable<String> options,
      ) {
        return const Column(
          children: <Widget>[Expanded(child: Placeholder())],
        );
      },
    );
  }
}

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

flutter-dashboard · 2025-02-21T18:33:12Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #163868 at sha 2333722

LongCatIsLooong · 2025-02-21T18:44:09Z

Instead of making the options view shorter, can you move the autocomplete widget up? I believe you can override https://main-api.flutter.dev/flutter/rendering/RenderObject/showOnScreen.html to achieve that.

LongCatIsLooong · 2025-02-25T01:10:03Z

packages/flutter/lib/src/widgets/autocomplete.dart

          fieldOffset = nextFieldOffset;
        });
      }
+      bottomInset = MediaQuery.viewInsetsOf(rootOverlayContext).bottom;


So viewInsets is accounted for in the calculation, but not the viewPadding? Do you think we should be using padding here?

Also, why bottom only if the insets may have positive top value, for example?

About both questions, I'm not sure. Currently the options view just takes up the space on the entire screen, ignoring safearea, view padding and all that. I'm not sure if this is intentional or not. @justinmc what do you think?

This comment doesn't seem to have been addressed?

Also, why bottom only if the insets may have positive top value, for example?

The documentation for MediaQuery.viewInsets says only .bottom is relevant because of the system keyboard? Unless I am missing something.

LongCatIsLooong · 2025-02-25T01:13:12Z

packages/flutter/lib/src/widgets/autocomplete.dart

    removeCompositionCallback = widget.optionsLayerLink.leader?.addCompositionCallback(
      _onLeaderComposition,
    );
+    rootOverlayContext = Overlay.of(context).context;


This does not necessarily target the root overlay if there are nested Overlays, as the variable name would indicate it seems?

That's true. The reason for this is to grab the context before the Scaffold applies Mediaquery.removePadding (when Scaffold.resizeToAvoidBottomInset is set to true), and this would no longer work if there is an Overlay between RawAutocomplete and Scaffold in the widget tree. But I don't know any better alternatives, do you have any ideas?

I think it should target the root overlay now after the suggestion in #163868 (comment)

packages/flutter/lib/src/widgets/autocomplete.dart

LongCatIsLooong · 2025-02-28T21:51:17Z

packages/flutter/lib/src/widgets/autocomplete.dart

          fieldOffset = nextFieldOffset;
        });
      }
+      bottomInset = MediaQuery.viewInsetsOf(rootOverlayContext).bottom;


This comment doesn't seem to have been addressed?

justinmc

LGTM with some questions, but I'll defer to @LongCatIsLooong

packages/flutter/lib/src/widgets/autocomplete.dart

justinmc

Renewing my LGTM, thanks for the changes 👍

LongCatIsLooong · 2025-03-01T01:54:53Z

packages/flutter/lib/src/widgets/autocomplete.dart

+      // The padding and view insets might have already been removed. To get the
+      // correct padding and view insets, use the build context of the root
+      // overlay.
+      final EdgeInsets padding = MediaQuery.paddingOf(rootOverlayContext);


The padding and view insets might have already been removed.

Then this probably should happen in the OverlayPortal implementation, so the overlayChild sees the correct MediaQuery?

But in that case how would the CustomSingleChildLayout get the padding values to apply to the child constraints? Maybe the MediaQuery.removePadding should happen in the OverlayPortal implementation over the entire overlaychild, but the padding values should still be retrieved here?

You can still get it from MediaQueryData?

LongCatIsLooong · 2025-03-01T01:56:42Z

packages/flutter/lib/src/widgets/autocomplete.dart

  VoidCallback? removeCompositionCallback;
+  late BuildContext rootOverlayContext;
+  double bottomPadding = 0.0;
+  double topPadding = 0.0;


Again, why bottom / top paddings specifically? Shouldn't we keep track of the EdgetInsets to avoid?

Add left and right as well?

Just keep the EdgeInsets? or better yet it doesn't have to be kept in instance variables if you update the MediaQuery of the overlayChild

victorsanni · 2025-06-18T20:47:50Z

Hi @LongCatIsLooong. Will #170818 also unblock this PR?

LongCatIsLooong · 2025-06-18T20:58:03Z

Hi @LongCatIsLooong. Will #170818 also unblock this PR?

Yeah I think so

Piinks · 2025-08-18T22:08:41Z

Hi @LongCatIsLooong. Will #170818 also unblock this PR?

Yeah I think so

Normally I would say greetings from stale PR triage, but now I see why you asked about #170818, I did not realize this was blocked on that. I'll see if I can turn that around ASAP. 👍

Piinks · 2026-01-12T23:33:04Z

I am going to suggest closing this for now. I am working with a contributor on the blocking issue, after which we can reopen this - although it may be easier to resolve the conflicts and update for the large lint overhaul in a fresh PR. :)

victorsanni · 2026-02-04T23:00:56Z

Reopening as blocker has been resolved.

fluttergithubbot · 2026-02-04T23:00:59Z

An existing Git SHA, f29d11d2283073b25d37e205312c537e3743813f, was detected, and no actions were taken.

To re-trigger presubmits after closing or re-opeing a PR, or pushing a HEAD commit (i.e. with --force) that already was pushed before, push a blank commit (git commit --allow-empty -m "Trigger Build") or rebase to continue.

victorsanni · 2026-02-04T23:24:46Z

Easier to close and open a new PR because of the merge conflicts.

victorsanni added 3 commits January 31, 2025 16:15

Constrain RawAutocomplete options view by soft keyboard

cf68325

Use overlay context

6b22916

Remove bottom inset update from build()

a8962a7

victorsanni requested review from LongCatIsLooong and justinmc February 21, 2025 17:47

github-actions bot added the framework flutter/packages/flutter repository. See also f: labels. label Feb 21, 2025

Merge branch 'master' into autocomplete-soft-keyboard

2333722

victorsanni mentioned this pull request Feb 21, 2025

set constraints for autocomplete suggestion overlay #157590

Closed

9 tasks

flutter-dashboard bot added the will affect goldens Changes to golden files label Feb 21, 2025

Merge branch 'master' into autocomplete-soft-keyboard

d11f6f8

LongCatIsLooong reviewed Feb 25, 2025

View reviewed changes

victorsanni added 2 commits February 25, 2025 15:22

Apply suggestions from review

4a8afa0

Merge branch 'master' into autocomplete-soft-keyboard

35f7263

victorsanni requested a review from LongCatIsLooong February 25, 2025 23:23

Merge branch 'master' into autocomplete-soft-keyboard

bb8ff5d

LongCatIsLooong reviewed Feb 28, 2025

View reviewed changes

victorsanni added 2 commits February 28, 2025 15:07

Respect padding instead of only viewInsets

b874d22

Merge branch 'master' into autocomplete-soft-keyboard

9990521

justinmc approved these changes Feb 28, 2025

View reviewed changes

packages/flutter/lib/src/widgets/autocomplete.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/widgets/autocomplete.dart Outdated Show resolved Hide resolved

victorsanni added 2 commits February 28, 2025 15:59

More tweaks

44c8683

Merge branch 'master' into autocomplete-soft-keyboard

04d5ffc

victorsanni requested review from LongCatIsLooong and justinmc March 1, 2025 00:02

justinmc approved these changes Mar 1, 2025

View reviewed changes

LongCatIsLooong reviewed Mar 1, 2025

View reviewed changes

Merge branch 'master' into autocomplete-soft-keyboard

f29d11d

victorsanni requested a review from LongCatIsLooong March 6, 2025 20:13

victorsanni marked this pull request as draft April 16, 2025 22:50

Piinks closed this Jan 12, 2026

victorsanni reopened this Feb 4, 2026

victorsanni closed this Feb 4, 2026

victorsanni mentioned this pull request Feb 4, 2026

Constrain RawAutocomplete options by soft keyboard #181930

Merged

9 tasks

Conversation

victorsanni commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented Feb 21, 2025

Uh oh!

LongCatIsLooong commented Feb 21, 2025

Uh oh!

LongCatIsLooong Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

victorsanni commented Jun 18, 2025

Uh oh!

LongCatIsLooong commented Jun 18, 2025

Uh oh!

Piinks commented Aug 18, 2025

Uh oh!

Piinks commented Jan 12, 2026

Uh oh!

victorsanni commented Feb 4, 2026

Uh oh!

fluttergithubbot commented Feb 4, 2026

Uh oh!

victorsanni commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

victorsanni commented Feb 21, 2025 •

edited

Loading

LongCatIsLooong Feb 25, 2025 •

edited

Loading