Flutter Autocomplete TextFormField() is overflowing off the right side of the screen

Question

I have an InPutDecorator that looks liek this with Autocomplete:

          // ********** Item Type Auto Compleate Start
          InputDecorator(
            decoration: const InputDecoration(
              icon: Icon(Icons.style),
              border: InputBorder.none,
            ),
            child: Autocomplete<String>(
                optionsBuilder: (TextEditingValue textEditingValue) {
              if (textEditingValue.text == '') {
                return itemTypeList;
              }
              return itemTypeList.where((String option) {
                return option
                    .toLowerCase()
                    .contains(textEditingValue.text.toLowerCase());
              });
            }, fieldViewBuilder:
                    (context, controller, focusNode, onEditingComplete) {
              itemTypeController = controller;

              return Focus(
                onFocusChange: (hasFocus) {
                  if (temperatureItemTypes
                      .contains(itemTypeController.text.trim())) {
                    //show temperature field
                    setState(() {
                      temperatureField = true;
                    });
                  } else {
                    setState(() {
                      temperatureField = false;
                    });
                  }
                  if (volumeItemTypes
                      .contains(itemTypeController.text.trim())) {
                    //show temperature field
                    setState(() {
                      volumeField = true;
                    });
                  } else {
                    setState(() {
                      volumeField = false;
                    });
                  }
                },
                child: TextFormField(
                  controller: controller,
                  focusNode: focusNode,
                  onEditingComplete: onEditingComplete,
                  decoration: const InputDecoration(
                    labelText: "Item type*",
                    hintText: 'What is the item?',
                  ),
                ),
              );
            }),
          ),

For some reason the auto complete box is huge and extends off the screen to the right:

I tried looking at the Widget inspector and it seems like the autocomplete is breaking out of the constraints of the textFormField which is odd.

I also tried wrapping the auto complete in a container but flutter said it was redundant.

It looks like its a bug in Flutter, and I read through this stack overflow which was similar: Flutter 2.0 - Autocomplete widget goes out of screen from right side

BUthad trouble adapting their code to mine. I think we are approaching it slightly different and I am having trouble understanding.

Answer 1

Here's a simple demo: https://dartpad.dev/?id=343ba572874e3d11fb4e62e1069e2200

To apply this to your code, just apply all your properties.

I haven't tested this yet since you didn't provide example data, but in my example dartpad above, it works fine.

LayoutBuilder(
  builder: (context, constraints) => InputDecorator(
    decoration: const InputDecoration(
      icon: Icon(Icons.style),
      border: InputBorder.none,
    ),
  child: RawAutocomplete<String>(
   // first property
   optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return itemTypeList;
    }
    return itemTypeList.where((String option) {
      return option
          .toLowerCase()
          .contains(textEditingValue.text.toLowerCase());
    });
  }, 

  //second property where you can limit the overlay pop up suggestion 
  optionsViewBuilder: (BuildContext context,
      AutocompleteOnSelected<String> onSelected,
      Iterable<String> options) {
    return Align(
      alignment: Alignment.topLeft,
      child: Material(
        elevation: 4.0,
        child: SizedBox(
          height: 200.0,
          // set width based on you need
          width: constraints.biggest.width*0.8,
          child: ListView.builder(
            padding: const EdgeInsets.all(8.0),
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final String option = options.elementAt(index);
              return GestureDetector(
                onTap: () {
                  onSelected(option);
                },
                child: ListTile(
                  title: Text(option),
                ),
              );
            },
          ),
        ),
      ),
    );
  },
  
  // third property
  fieldViewBuilder:
          (context, controller, focusNode, onEditingComplete) {
    itemTypeController = controller;

    return Focus(
      onFocusChange: (hasFocus) {
        if (temperatureItemTypes
            .contains(itemTypeController.text.trim())) {
          //show temperature field
          setState(() {
            temperatureField = true;
          });
        } else {
          setState(() {
            temperatureField = false;
          });
        }
        if (volumeItemTypes
            .contains(itemTypeController.text.trim())) {
          //show temperature field
          setState(() {
            volumeField = true;
          });
        } else {
          setState(() {
            volumeField = false;
          });
        }
      },
      child: TextFormField(
        controller: controller,
        focusNode: focusNode,
        onEditingComplete: onEditingComplete,
        decoration: const InputDecoration(
          labelText: "Item type*",
          hintText: 'What is the item?',
        ),
      ),
    );
  }),
 ),
),