Autocomplete Widget In Flutter

Post Views: 135

Hello Friends, Today we are going to learn how to use Autocomplete Widget in Flutter. Actually when I was working on Pincode to City conversion feature for my personal project using Indian Post API, that time there I was needed this feature too. So let’s start without wasting any time and if you want to learn more about Autocomplete Widget please check https://api.flutter.dev/flutter/material/Autocomplete-class.html

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Autocomplete Widget Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Autocomplete Widget Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> suggestions = [
    "Apple",
    "Banana",
    "Cucumber",
    "Doctor",
    "Everywhere",
    "Fruits",
    "Guava",
    "Honey",
    "Ice-Cream"
        "Jack-fruit",
    "Kite"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Autocomplete<String>(
              optionsBuilder: (TextEditingValue textEditingValue) async {
                return suggestions
                    .where((String val) => val
                        .toLowerCase()
                        .contains(textEditingValue.text.toLowerCase()))
                    .toList();
              },
              fieldViewBuilder: (BuildContext context,
                  TextEditingController fieldTextEditingController,
                  FocusNode fieldFocusNode,
                  VoidCallback onFieldSubmitted) {
                return TextFormField(
                    key: GlobalKey<FormState>(),
                    controller: fieldTextEditingController,
                    focusNode: fieldFocusNode);
              },
              onSelected: (String selection) {
                print("${selection}");
              },
              optionsViewBuilder: (BuildContext context,
                  AutocompleteOnSelected<String> onSelected,
                  Iterable<String> options) {
                return Align(
                  alignment: Alignment.topLeft,
                  child: Material(
                    child: Container(
                      color: Colors.blue,
                      width: MediaQuery.of(context).size.width - 28,
                      child: ListView.builder(
                        padding: EdgeInsets.all(10.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}",
                                  style: const TextStyle(color: Colors.white)),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Autocomplete Widget Test',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Autocomplete Widget Test'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

List<String> suggestions = [

"Apple",

"Banana",

"Cucumber",

"Doctor",

"Everywhere",

"Fruits",

"Guava",

"Honey",

"Ice-Cream"

"Jack-fruit",

"Kite"

];

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text(widget.title)),

body: Padding(

padding: EdgeInsets.all(12),

child: Column(

crossAxisAlignment: CrossAxisAlignment.center,

children: <Widget>[

Autocomplete<String>(

optionsBuilder: (TextEditingValue textEditingValue) async {

return suggestions

.where((String val) => val

.toLowerCase()

.contains(textEditingValue.text.toLowerCase()))

.toList();

fieldViewBuilder: (BuildContext context,

TextEditingController fieldTextEditingController,

FocusNode fieldFocusNode,

VoidCallback onFieldSubmitted) {

return TextFormField(

key: GlobalKey<FormState>(),

controller: fieldTextEditingController,

focusNode: fieldFocusNode);

onSelected: (String selection) {

print("${selection}");

optionsViewBuilder: (BuildContext context,

AutocompleteOnSelected<String> onSelected,

Iterable<String> options) {

return Align(

alignment: Alignment.topLeft,

child: Material(

child: Container(

color: Colors.blue,

width: MediaQuery.of(context).size.width - 28,

child: ListView.builder(

padding: EdgeInsets.all(10.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}",

style: const TextStyle(color: Colors.white)),

);

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

Output

Source Code

https://github.com/rajeshkumarsahanee/autocomplete_widget_test

Thanks for visiting
If you find this helpful then please do share

Autocomplete Widget In Flutter

main.dart

Output

Source Code

Comments

Leave a Reply Cancel reply