Flutter autocomplete text entry using autocomplete_textfield package

 Author: Shengtao Zhou       Created: 12/2/2019 6:11:41 AM       Modified: 12/2/2019 6:51:17 AM   More...
Here's the steps to add autocomplete of entering a car maker in a text field:

1. Add autocomplete package to yaml file dependencies section:

  autocomplete_textfield: ^1.7.3

2. Create Data Class with a static method returning list of car makers:

class CarMaker {
  String name;
  String country;
  CarMaker(this.name, this.country);
  static List<CarMaker> getCarMakers() {
    List<CarMaker> list = new List<CarMaker>();
    list.add(CarMaker('Toyota', 'Japan'));
    list.add(CarMaker('Volkswagen Group', 'Germany'));
    list.add(CarMaker('Hyundai', 'South Korea'));
    list.add(CarMaker('General Motors', 'USA'));
    list.add(CarMaker('Ford', 'USA'));
    list.add(CarMaker('Nissan', 'Japan'));
    list.add(CarMaker('Honda', 'Japan'));
    list.add(CarMaker('Fiat Chrysler Automobiles', 'Italy/USA'));
    list.add(CarMaker('Renault', 'France'));
    list.add(CarMaker('PSA', 'France'));
    list.add(CarMaker('Suzuki', 'Japan'));
    list.add(CarMaker('SAIC', 'China'));
    list.add(CarMaker('Daimler', 'Germany'));
    list.add(CarMaker('BMW', 'Germany'));
    list.add(CarMaker('Geely', 'China'));
    return list;
  }
}

3. Create screen with AutoCompleteTextField<CarMaker> widget:

1) Import 'package:autocomplete_textfield/autocomplete_textfield.dart'
2) Add AutoCompleteTextField<CarMaker> widget
3) Set suggestions property value to CarMaker.getCarMakers()
4) Create 'row' widget for each row shows in autocomplet list
5) Implement itemFilter,itemSorter,itemSubmitted,itemBuilder functions

import 'package:flutter/material.dart';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';
import 'package:list_view_activities/CarMakers.dart';
class AutoCompleteTest extends StatefulWidget {
  @override
  _AutoCompleteTestState createState() => _AutoCompleteTestState();
}
class _AutoCompleteTestState extends State<AutoCompleteTest> {
  @override
  Widget build(BuildContext context) {
    var _carMakerController = new TextEditingController(text: '');
    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: 20,),
          AutoCompleteTextField<CarMaker>(
            controller: _carMakerController,
            clearOnSubmit: false,
            suggestions: CarMaker.getCarMakers(),
            style: TextStyle(color: Colors.black, fontSize: 16.0),
            decoration: InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
              hintText: "Search Car Maker",
              hintStyle: TextStyle(color: Colors.black),
            ),
            itemFilter: (item, query) {
              return item.name.toLowerCase().startsWith(query.toLowerCase());
            },
            itemSorter: (a, b) {
              return a.name.compareTo(b.name);
            },
            itemSubmitted: (item) {
              _carMakerController.text = item.name;
            },
            itemBuilder: (context, item) {
              // ui for the autocomplete row
              return row(item);
            },
          ),
        ],
      ),
    );
  }
}
Widget row(CarMaker maker) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Text(
        maker.name,
        style: TextStyle(color: Colors.blue),
      ),
      SizedBox(
        width: 5,
      ),
      Text(
        maker.country,
        style: TextStyle(color: Colors.orange),
      ),
    ],
  );
}

4. Open the screen when a button is clicked:

            RaisedButton(
              child:Text('Autocomplet Screen'),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => new AutoCompleteTest()));
              },
            ),




More...          Back to List          

(Please enter you comments between 100 to 2000 characters. Thanks for your contribution.) 

         Created:       Modified: 

Editing a comment

       (Please enter you comments between 100 to 2000 characters. Please login before edit comment.) 

div class="col-md-2">