Suggestions don't show up in bottom sheets

[Hadii1]

Hello, Thank you very much for this great widget. I was trying to use in bottom sheets and suggestions weren't showing up. I'm using the latest version (1.8.0) and here's a minimal code to copy paste:

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ButtonClass(),
      ),
    );
  }
}

class ButtonClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(
        'show bottom sheet',
      ),
      onPressed: () {
        Scaffold.of(context).showBottomSheet((_) {
          return SheetWidget();
        });
      },
    );
  }
}

class SheetWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: TypeAheadField(
      textFieldConfiguration: TextFieldConfiguration(
          autofocus: true,
          style: DefaultTextStyle.of(context)
              .style
              .copyWith(fontStyle: FontStyle.italic),
          decoration: InputDecoration(border: OutlineInputBorder())),
      suggestionsCallback: (pattern) {
        return getFakeSuggestions();
      },
      itemBuilder: (context, String number) {
        return ListTile(
          leading: Icon(Icons.shopping_cart),
          title: Text(number),
        );
      },
      onSuggestionSelected: (suggestion) {},
    ));
  }
}

List<String> getFakeSuggestions() {
  return List.generate(25, (index) {
    return index.toString();
  });
}

[KaYBlitZ]

Hi, it seems to work fine.

[Hadii1]

I was trying the code on an iphone 11 pro max emulator , I tried it again on a pixel 3 android emulator and it seemed to work. maybe the issue is iOS specific?

[TimWhiting]

I've been able to reproduce this issue on web / desktop. (I've been working on an app, and ran into this issue earlier).

The issue is that the suggestionsBox only recomputes it's size and offset when the textfield widget is first built, the keyboard is displayed, window is resized, or scroll position changes.

This misses the case when none of those things happen, but the location has changed.

For example on web / desktop the virtual keyboard doesn't pop up when the field obtains focus. And when that happens in a bottomSheet, then the only time the suggestions box has updated it's size and offset is when the widget was first built (i.e. when the bottomSheet started scrolling up from the bottom of the screen). At that point the bottom sheet has almost no size, and so the max size of the suggestionsBox is calculated to be something close to zero.

There is no prebuilt widget for notifying a child when the location has changed so I came up with one that closely models the Flutter framework's SizeChangedLayoutNotifier which notifies a child when the size has changed. I modified it to do the same but for location changes. However, the code is not as clean as I'd like to have it before submitting a pull request & I have to catch an exception for some reason. (i.e. There are bugs in my implementation. It works for my app, but not for the example you gave above). I'm not super familiar with the render tree of flutter which is the main problem.

I also think my LocationChangedNotifier should go into the flutter framework and not this library, which is another reason why I'm not submitting a pull request at this time.

But you can look at my changes here: https://github.com/TimWhiting/flutter_typeahead/blob/master/lib/flutter_typeahead.dart.

I guess an alternative solution would be to recompute the size for the suggestionsBox every time it was shown for the first time. It's up to the libraries author to determine the best solution to this issue. But hopefully this gives some direction.

[Hadii1]

@TimWhiting Thanks for the insight . I'm delaying the widget first build now manually with a future.delayed and it does show the suggestions. Ugly but it works for now until a later fix.

[TimWhiting]

A future.delayed was my initial approach as well to validate the issue. It definitely needs to be fixed in the library as well. I just pushed an update to my branch that just resizes the box every time the overlay gets built. It's probably not super performant, but it works. @AbdulRahmanAlHamali what are your thoughts on this issue?

[BenevidesLecontes]

@Hadii1 I can confirm, it doesn't work on ios, works on android.

[francobasilico]

The CupertinoTypeAheadField is not working using showCupertinoModalPopup

[DanielTheProgrammer]

Two years later, still doesn't work