Flutter Async Autocomplete

A Flutter plugin make easy to dynamic autocomplete input

Preview

ToDo

• Add validation functionality
• Add possibility to show empty message when no suggestion is found

Done

• Add asynchronous suggestions fetch

Installation

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_async_autocomplete: ^0.0.1

Basic example

You can create a simple autocomplete input widget as shown in first preview with the following example:

import 'package:flutter/material.dart';
import 'package:flutter_async_autocomplete/flutter_async_autocomplete.dart';

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var autoController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(title: Text('Example')),
          body: Container(
            padding: EdgeInsets.all(10),
            alignment: Alignment.center,
            child: AsyncAutocomplete<Country>(
              controller: autoController,
              onTapItem: (Country country) {
                autoController.text = country.name;
                print("selected Country ${country.name}");
              },
              suggestionBuilder: (data) => ListTile(
                title: Text(data.name),
                subtitle: Text(data.code),
              ),
              asyncSuggestions: (searchValue) => getCountry(searchValue),
            ),
          ),
        ),
      ),
    );
  }

  Future<List<Country>> getCountry(String search) async {
    List<Country> countryList = [
      Country(name: 'Afghanistan', code: 'AF'),
      Country(name: 'Åland Islands', code: 'AX'),
    
    ];

    await Future.delayed(const Duration(microseconds: 500));
    return countryList
        .where((element) =>
            element.name.toLowerCase().startsWith(search.toLowerCase()))
        .toList();
  }

  onChange(value) {
    //  <Country>(value) {
    setState(() {
      autoController.text = value.name;
    });
    print('onChanged value: ${value.name}');
  }
}

class Country {
  String name;
  String code;

  Country({required this.code, required this.name});
}

Example with customized style

You can customize other aspects of the autocomplete widget such as the suggestions text style, background color and others as shown in example below:

EasyAutocomplete(
    ...
    ,
    cursorColor: Colors.purple,
        decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5),
            borderSide: BorderSide(
            color: Colors.purple,
            style: BorderStyle.solid
            )
        ),
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5),
            borderSide: BorderSide(
            color: Colors.purple,
            style: BorderStyle.solid
            )
        )
    ),       
)
       

The above example will generate something like below preview:

Issues & Suggestions

If you encounter any issue you or want to leave a suggestion you can do it by filling an issue.

Thank you for the support!