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()));
},
),