How can I prevent options view of the RawAutocomplete widget from overflowing on screen in Flutter?

user_8924010 0
Viewed 165

enter image description here

I'm currently using a custom widget similar to this chips_input library. However, I don't want to give the options view (the popup list) a static maximum height. What I want to achieve is to dynamically set a maximum height of screen height - popup y offset. In this way, bottom of the options view will be at the bottom of the screen and all of the content inside the options view will be visible through scrolling. Is there any that I can access the textfield's or options view's offset to calculate the height?

My autocomplete widget looks similar to this:

RawAutocomplete<T>(
  ...
  optionsViewBuilder: Align(
    alignment: Alignment.topLeft,
    child: SizedBox(
      width: textFieldWidth,
      child: Material(
        elevation: 16,
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: options.length,
          itemBuilder: (BuildContext context, int index) {
            final T option = options.elementAt(index);
            return suggestionBuilder(context, option);
          },
        ),
      ),
    ),
  ),
);
dart flutter popup
1 Answers

You can do this by putting a height on your SizedBox that uses MediaQuery to get the screen height:

popupOffset = 20;
RawAutocomplete<T>(
  ...
  optionsViewBuilder: Align(
    alignment: Alignment.topLeft,
    child: SizedBox(
      width: textFieldWidth,
      height: MediaQuery.of(context).size.height - popupOffset,
      child: Material(
        elevation: 16,
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: options.length,
          itemBuilder: (BuildContext context, int index) {
            final T option = options.elementAt(index);
            return suggestionBuilder(context, option);
          },
        ),
      ),
    ),
  ),
);
user_151701200
Related