Flutter TextFormField suggestion or auto complete

Question

I want to implement suggestions inside textFormField. same as below

So, I've searched regarding this but with no success. Everywhere I've got is suggestions inside list. Which is easy to do. If you have any suggestions then please add your valuable answer and comment.

Here is my code

             Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    TextFormField(
                      controller: controller,
                      onFieldSubmitted: (value) {},
                      onChanged: (value) {
                        displaySuggestionInList(value);
                      },
                    ),
                    const SizedBox(height: 30),
                    ConstrainedBox(
                      constraints: const BoxConstraints(
                        maxHeight: 100,
                        maxWidth: 200,
                        minWidth: 200,
                        minHeight: 100,
                      ),
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: dashboardLayouts!.length,
                        itemBuilder: (context, index) {
                          return Text((dashboardLayouts![index]['dashBoardData']
                                  as DashboardInfo)
                              .commonName
                              .toString());
                        },
                      ),
                    )
                  ],
                ),

Answer 1

What you need to create is a Type-Ahead Widget. To do that, you will firstly create the normal List suggestion StatefulWidget. While on the filter function you should update the hint with the first value from the suggestion list. This way you can call the hint value and place it anywhere on your screen. Unfortunately for us, flutter doesn't allow the update showing of hint within the input field while typing.

Although I made an example for you to get the idea.

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

  @override
  State<AutocompleteExample> createState() => _AutocompleteExampleState();
}

class _AutocompleteExampleState extends State<AutocompleteExample> {
  TextEditingController controller = TextEditingController();
  List suggestionList = [];
  String hint = "";

  List<String> nameList = <String>[
    'aardvark',
    'bobcat',
    'chameleon',
    'Nathaniel Bond',
    'Taylor Story',
    'Lamont Padilla',
    'Jamia Sun',
    'Nikki Reichert',
    'Tea Holguin',
    'Rafael Meade',
    'Mercedez Goad',
    'Aileen Foltz',
    'Bryant Burt',
  ];

  void typeAheadFilter(String value) {
    suggestionList.clear();

    if (value.isEmpty) {
      setState(() {});
      return;
    }

    for (String name in nameList) {
      if (name.toLowerCase().contains(value)) {
        suggestionList.add(name);
      }
    }

    if (suggestionList.isNotEmpty) {
      var firstSuggestion = suggestionList[0];

      setState(() => hint = firstSuggestion);
    }

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        TextFormField(
          controller: controller,
          onFieldSubmitted: (value) {},
          onChanged: (value) => typeAheadFilter(value),
          decoration: InputDecoration(
              hintText: hint,
              labelText: hint.isEmpty ? "Search" : hint,
              alignLabelWithHint: true,
              hintTextDirection: TextDirection.rtl),
        ),
        const SizedBox(height: 10),
        if (suggestionList.isNotEmpty || controller.text.isNotEmpty) ...[
          Expanded(
            child: ListView.separated(
              padding: const EdgeInsets.all(10),
              shrinkWrap: true,
              itemCount: suggestionList.length,
              separatorBuilder: (context, index) => const Divider(),
              itemBuilder: (context, index) {
                return Text((suggestionList[index]));
              },
            ),
          )
        ] else ...[
          Expanded(
            child: ListView.separated(
              padding: const EdgeInsets.all(10),
              shrinkWrap: true,
              itemCount: nameList.length,
              separatorBuilder: (context, index) => const Divider(),
              itemBuilder: (context, index) {
                return Text((nameList[index]));
              },
            ),
          )
        ]
      ],
    );
  }
}