Search code examples
flutterinputmobilelayout

Show autocomplete options above field


I have following component, which makes use of suggestions (using the Autocomplete class):

return Autocomplete<String>(
  // ...
  fieldViewBuilder: (BuildContext context,
            TextEditingController fieldTextEditingController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted) {
    return TextField(
      // ...
    );
  optionsViewBuilder: (BuildContext context,
            AutocompleteOnSelected<String> onSelected,
            Iterable<String> options) {
    return Material(
      elevation: 4.0,
      child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: white,
      ),
      width: 360.0,
      child: ListView.builder(
        padding: EdgeInsets.zero,
        itemCount: options.length,
        // ...
      )

My goal is to somehow have the options show right above the input field, instead of below is, as this component is placed on the bottom of the page


Solution

  • Use the following argument

    optionsViewOpenDirection: OptionsViewOpenDirection.up,