Flutter search item from ListView - flutter

Question

I'm trying to search item from ListView but I can't seem to find a way. What I want is when I type in the contact name from my contact list, then the specific contact appears on the page.
Here is my search code:
Row(
children: [
Icon(
Icons.search,
color: Color(0xff99999B),
size: 20,
),
Expanded(
child: TextField(
cursorColor: Colors.grey,
onChanged: (value) {
setState(() {
contactList = contactList.where((element) => element.contains(value)).toList();
});
},
decoration: InputDecoration(
hintText: 'Search contact...',
hintStyle: TextStyle(
color: Color(0xff99999B),
fontSize: 12
...
And my ListView code:
Container(
child: ListView.builder(
itemCount: contactList.length,
itemBuilder:(BuildContext context,index)=>
Column(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 250
),
child: Text(contactList[index].userName!,
...
Is there any solutions?

Answer 1

var contactList = ["asi", "adi", "java", "c++", "Kotlin", "Dart", "Flutter"];
var contactList2 = [];
consider create two list keep the original list and manage the secondlist for filtering .look below example
Your widget like
Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
onPressed: () {},
icon: const Icon(Icons.add),
),
],
),
body: Column(
children: [
Container(
height: 50,
child: Row(children: [
Icon(
Icons.search,
color: Color(0xff99999B),
size: 20,
),
Expanded(
child: TextField(
cursorColor: Colors.grey,
onChanged: (value) {
setState(() {
contactList2 = contactList
.where((element) => element
.toLowerCase()
.contains(value.toLowerCase()))
.toList();
});
},
decoration: InputDecoration(
hintText: 'Search contact...',
hintStyle: TextStyle(
color: Color(0xff99999B), fontSize: 12))))
]),
),
Flexible(
child: ListView.builder(
itemCount: contactList2.length,
itemBuilder: (BuildContext context, index) => ListTile(
title: Text(
contactList2[index],
style:
TextStyle(color: Color(0xff99999B), fontSize: 25),
),
)),
)
],
),
);
SAmpleCode DArtpad live code check here
import 'package:flutter/material.dart';
//import 'package:pucon/home.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Parent(),
);
}
}
class Parent extends StatefulWidget {
#override
State<Parent> createState() => _ParentState();
}
var contactList = ["Asif", "adi", "java", "c++", "Kotlin", "Dart", "Flutter"];
var contactList2 = [];
class _ParentState extends State<Parent> {
Widget build(context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
onPressed: () {},
icon: const Icon(Icons.add),
),
],
),
body: Column(
children: [
Container(
height: 50,
child: Row(children: [
Icon(
Icons.search,
color: Color(0xff99999B),
size: 20,
),
Expanded(
child: TextField(
cursorColor: Colors.grey,
onChanged: (value) {
setState(() {
contactList2 = contactList
.where((element) => element
.toLowerCase()
.contains(value.toLowerCase()))
.toList();
});
},
decoration: InputDecoration(
hintText: 'Search contact...',
hintStyle: TextStyle(
color: Color(0xff99999B), fontSize: 12))))
]),
),
Flexible(
child: ListView.builder(
itemCount: contactList2.length,
itemBuilder: (BuildContext context, index) => ListTile(
title: Text(
contactList2[index],
style:
TextStyle(color: Color(0xff99999B), fontSize: 25),
),
)),
)
],
),
);
}
}