Keyboard cover SearchAnchor list results

Steps to reproduce

Run the code example bellow.
Notice the suggestionsBuilder has 30 ListTile, but when scrolling you can't reach the last one which is number 30. Of course when keyboard is visible

Expected results

Last element in the suggestionsBuilder list should always be visible. even when the keyboard is shown.
In general resizeToAvoidBottomInset: true doesn't work in this case.

Actual results

When the keyboard is visible you can scroll only until the last element of suggestionsBuilder list is at the bottom on the screen, which is wrong because the keyboard is placed on top of them. the scroll should be until the last element reached to the top of keyboard.

Code sample

import 'package:flutter/material.dart';

/// Flutter code sample for pinned [SearchAnchor] while scrolling.

void main() {
  runApp(const PinnedSearchBarApp());
}

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

  @override
  State<PinnedSearchBarApp> createState() => _PinnedSearchBarAppState();
}

class _PinnedSearchBarAppState extends State<PinnedSearchBarApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          useMaterial3: true, colorSchemeSeed: const Color(0xff6750a4)),
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                clipBehavior: Clip.none,
                shape: const StadiumBorder(),
                scrolledUnderElevation: 0.0,
                titleSpacing: 0.0,
                backgroundColor: Colors.transparent,
                floating:
                    true, // We can also uncomment this line and set `pinned` to true to see a pinned search bar.
                title: SearchAnchor.bar(
                  suggestionsBuilder:
                      (BuildContext context, SearchController controller) {
                    return List<Widget>.generate(
                      30,
                      (int index) {
                        return ListTile(
                          titleAlignment: ListTileTitleAlignment.center,
                          title: Text('Initial list item $index ghgh'),
                        );
                      },
                    );
                  },
                ),
              ),
              // The listed items below are just for filling the screen
              // so we can see the scrolling effect.
              SliverToBoxAdapter(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: SizedBox(
                    height: 100.0,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 10,
                      itemBuilder: (BuildContext context, int index) {
                        return SizedBox(
                          width: 100.0,
                          child: Card(
                            child: Center(child: Text('Card $index')),
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
              SliverToBoxAdapter(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Container(
                    height: 1000,
                    color: Colors.deepPurple.withOpacity(0.5),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 15.1 24B83 darwin-arm64, locale en-MA)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.95.3)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!```

</details>

@Errechydy

Hi @Errechydy,

It looks like the issue is caused by resizeToAvoidBottomInset being set to false. Since the keyboard overlaps with the last items in the suggestionsBuilder list, the user is unable to scroll past the point where the list reaches the keyboard's top.

To resolve this issue, you might consider the following changes:

Set resizeToAvoidBottomInset to true in the Scaffold. This will adjust the entire UI when the keyboard appears and make space for the input field and suggestions.
```
resizeToAvoidBottomInset: true,
```
If setting resizeToAvoidBottomInset to true doesn't fully resolve the problem, try wrapping the list in a SingleChildScrollView or use a DraggableScrollableSheet. This can help manage the available scroll space better when the keyboard is visible.
Consider using MediaQuery.of(context).viewInsets.bottom to get the current height of the keyboard and adjust the padding or height of the suggestions list accordingly. This way, the bottom element of the list will always be visible, even when the keyboard is shown.

@arslanraza7

@arslanraza7 Thanks for your comment, but this is a bug that needs to be solved inside SearchAnchor. what you're proposing are only workaround the problem. I agree setting resizeToAvoidBottomInset: true, in the Scaffold should fix the problem but id doesn't.

Seems like padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom) needs to be added to ListView inside this file package:flutter/src/material/search_anchor.dart.
Change this :

  Widget viewBuilder(Iterable<Widget> suggestions) {
    if (widget.viewBuilder == null) {
      return MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: ListView(
          children: suggestions.toList()
        ),
      );
    }
    return widget.viewBuilder!(suggestions);
  }

To this :

  Widget viewBuilder(Iterable<Widget> suggestions) {
    if (widget.viewBuilder == null) {
      return MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: ListView(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          children: suggestions.toList(),
        ),
      );
    }
    return widget.viewBuilder!(suggestions);
  }

Thanks for the report. Seeing the same behavior as reported on latest versions.

159261.mov

stable : 3.24.5
master : 3.27.0-1.0.pre.599

Seems like padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom) needs to be added to ListView inside this file package:flutter/src/material/search_anchor.dart.

Fair warning, that should be MediaQuery.viewInsetsOf(context).bottom, otherwise you'll have it rebuild when the entire media query changes.

Also, why is that ListView not ListView.builder()...

My Current workaround is to override the viewBuilder property of the SearchAnchor widget and set MediaQuery.viewInsetsOf(context).bottom as mentioned above.

Retrieving the viewInsets value only works if the parent scaffold is marked as resizeToAvoidBottomInset: false

 SearchAnchor(
          searchController: _searchController,
          viewBuilder: (suggestions) {
            return ListView.builder(
              itemCount: suggestions.length,
              padding: EdgeInsets.only(
                bottom: MediaQuery.viewInsetsOf(context).bottom,
              ),
              prototypeItem: suggestions.elementAtOrNull(0),
              itemBuilder: (_, index) {
                return suggestions.elementAtOrNull(index);
              },
            );
          },
    ...
);

Update:

It's also possible to detect keyboard size changes using View.of(context).viewInsets.bottom

Fix keyboard cover SearchAnchor list results (#165382)

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.

Fix keyboard cover SearchAnchor list results (#165382)

Fix keyboard cover SearchAnchor list results (flutter#165382)

Fix keyboard cover SearchAnchor list results (#165382)

Navigation Menu

Repository navigation

Keyboard cover SearchAnchor list results #159261

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Keyboard cover SearchAnchor list results #159261

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

arslanraza7 commented on Nov 21, 2024

Errechydy commented on Nov 21, 2024

Errechydy commented on Nov 21, 2024

darshankawar commented on Nov 22, 2024

navaronbracke commented on Nov 22, 2024

callmephil commented on Apr 12, 2025

github-actions commented on May 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions