Autocompleter in Flutter

---

---

---

Add following dependency in pubspec.yaml file:

autocomplete_textfield: ^1.6.4

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';

void main() {
  runApp(MaterialApp(
    home: MyWidget(),
  ));
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List names = ["abhishek", "rahul", "ashok", "sonu", "anil"];
  GlobalKey<AutoCompleteTextFieldState<String>> key = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Autocomplete Tutorial"),
      ),
      body: Container(
        child: Column(
          children: [
            SizedBox(
              height: 10,
            ),
            Text(
              "Default Autocompleter",
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              margin: EdgeInsets.only(left: 20, right: 20, top: 10),
              padding: EdgeInsets.only(left: 5),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                border: Border.all(width: 1),
              ),
              child: Autocomplete<String>(
                optionsBuilder: (value) {
                  if (value.text == "") {
                    return Iterable.empty();
                  }
                  return names.where(
                      (element) => element.contains(value.text.toLowerCase()));
                },
                onSelected: (item) => print("Selected Value is : $item"),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Text(
              "Plugin Autocompleter",
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              margin: EdgeInsets.all(20),
              decoration: BoxDecoration(
                border: Border.all(),
              ),
              child: AutoCompleteTextField<String>(
                key: key,
                itemSubmitted: (data) => print(data),
                decoration: InputDecoration(
                  hintText: "Type Name",
                  //filled: true,
                ),
                itemBuilder: (context, suggestion) => Container(
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: Text(
                      suggestion,
                      style: TextStyle(fontSize: 20, fontFamily: "serif"),
                    ),
                  ),
                ),
                suggestions: names,
                itemFilter: (suggestion, query) =>
                    suggestion.toLowerCase().startsWith(query),
                itemSorter: (name1, name2) => name1.compareTo(name2),
                clearOnSubmit: false,
              ),
            ),
          ],
        ),
      ),
    );
  }
}