TypeAhead in Flutter

3 min readMay 28, 2020

Hey Folks,

Flutter is in it’s developing stage with its community growing day by day.It is undertaking the mobile development market because of its rich set of fully-customizable widgets and flexible UI,but now also there are some issues for which you have to spend hours searching to get desired output.Here,we are gonna talk about Typeahead package in flutter which is a well designed and easy to use package used for Dropdowns with search input field.

So Let’s Get Started

After this follow as the dialogs says i.e entering the name of your app etc.

Let’s start by installing typeahead package from https://pub.dev/packages/flutter_typeahead

You can add this to your project by navigating to pubspec.yaml file and adding the bottom line(download the latest version by navigating to above link) to your dependencies and running flutter pub get:

flutter_typeahead: ^1.8.1

Now let’s import the package in main.dart by adding :

import 'package:flutter_typeahead/flutter_typeahead.dart';

Now let’s create controller for TextField as :

final TextEditingController _typeAheadController = TextEditingController();

I am just creating One Field to add State you can add this piece of code in any form or input fields as per your requirements:

TypeAheadField(
    textFieldConfiguration: TextFieldConfiguration(
      decoration: InputDecoration(labelText: 'State'),
      controller: this._typeAheadController,
    ),
    suggestionsCallback: (pattern) async {
      return await StateService.getSuggestions(pattern);
    },
    transitionBuilder:
        (context, suggestionsBox, controller) {
      return suggestionsBox;
    },
    itemBuilder: (context, suggestion) {
      return ListTile(
        title: Text(suggestion),
      );
    },
    onSuggestionSelected: (suggestion) {
      this._typeAheadController.text = suggestion;
    })

You may get an error for now because we have not added the StateService class.

Now Let’s Add the StateService class from where our list will be populated.

class StateService {
  static final List<String> states = [
    'ANDAMAN AND NICOBAR ISLANDS',
    'ANDHRA PRADESH',
    'ARUNACHAL PRADESH',
    'ASSAM',
    'BIHAR',
    'CHATTISGARH',
    'CHANDIGARH',
    'DAMAN AND DIU',
    'DELHI',
    'DADRA AND NAGAR HAVELI',
    'GOA',
    'GUJARAT',
    'HIMACHAL PRADESH',
    'HARYANA',
    'JAMMU AND KASHMIR',
    'JHARKHAND',
    'KERALA',
    'KARNATAKA',
    'LAKSHADWEEP',
    'MEGHALAYA',
    'MAHARASHTRA',
    'MANIPUR',
    'MADHYA PRADESH',
    'MIZORAM',
    'NAGALAND',
    'ORISSA',
    'PUNJAB',
    'PONDICHERRY',
    'RAJASTHAN',
    'SIKKIM',
    'TAMIL NADU',
    'TRIPURA',
    'UTTARAKHAND',
    'UTTAR PRADESH',
    'WEST BENGAL',
    'TELANGANA',
    'LADAKH'  ];


  static List<String> getSuggestions(String query) {
    List<String> matches = List();
    matches.addAll(states);
    matches.retainWhere((s) =>   s.toLowerCase().contains(query.toLowerCase()));
    return matches;
  }