Tutorial and code of Textfield Search in Flutter. Copy and paste the below code as per your requirements.
textfield_search: ^0.9.2
import 'package:flutter/material.dart';
import 'package:textfield_search/textfield_search.dart';
import 'dart:async';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Textfield Search',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Textfield Search'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, this.title = 'Textfield Search'}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _testList = [
'Test Item 1',
'Test Item 2',
'Test Item 3',
'Test Item 4',
];
TextEditingController myController = TextEditingController();
TextEditingController myController2 = TextEditingController();
TextEditingController myController3 = TextEditingController();
@override
void initState() {
super.initState();
myController.addListener(_printLatestValue);
myController2.addListener(_printLatestValue);
myController3.addListener(_printLatestValue);
}
_printLatestValue() {
print("text field: ${myController.text}");
print("text field: ${myController2.text}");
print("text field: ${myController3.text}");
}
@override
void dispose() {
myController.dispose();
myController2.dispose();
myController3.dispose();
super.dispose();
}
Future<List> fetchSimpleData() async {
await Future.delayed(const Duration(milliseconds: 2000));
List _list = <dynamic>[];
_list.add('Text' + ' Item 1');
_list.add('Test' + ' Item 2');
_list.add('Test' + ' Item 3');
return _list;
}
Future<List> fetchComplexData() async {
await Future.delayed(const Duration(milliseconds: 1000));
List _list = <dynamic>[];
List _jsonList = [
{'label': 'Text' + ' Item 1', 'value': 30},
{'label': 'Text' + ' Item 2', 'value': 31},
{'label': 'Text' + ' Item 3', 'value': 32},
];
_list.add(TestItem.fromJson(_jsonList[0]));
_list.add(TestItem.fromJson(_jsonList[1]));
_list.add(TestItem.fromJson(_jsonList[2]));
return _list;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(child: Text(widget.title),),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Form(
child: ListView(
children: <Widget>[
const SizedBox(height: 16),
TextFieldSearch(
label: 'Simple Future List',
controller: myController2,
future: () {
return fetchSimpleData();
}),
const SizedBox(height: 16),
TextFieldSearch(
label: 'Complex Future List',
controller: myController3,
future: () {
return fetchComplexData();
},
getSelectedValue: (item) {
print(item);
},
minStringLength: 5,
textStyle: const TextStyle(color: Colors.red),
decoration: const InputDecoration(hintText: 'Search For Something'),
),
const SizedBox(height: 16),
TextFieldSearch(
initialList: _testList,
label: 'Simple List',
controller: myController),
const SizedBox(height: 16),
TextFormField(
decoration: const InputDecoration(labelText: 'Description'),
),
],
),
),
),
);
}
}
class TestItem {
final String label;
dynamic value;
TestItem({required this.label, this.value});
factory TestItem.fromJson(Map<String, dynamic> json) {
return TestItem(label: json['label'], value: json['value']);
}
}