Can't search contacts

So I have made a list of static contacts, and I have tried to add a search bar, however I can't search the contacts using the search bar. When I click on search bar it will open but then close. The keyboard pops up for a moment but then will close. The idea was to make the search predictive, so when a name is typed in, it will list the closed based on the names in the database. Any ideas?

class ContactsPage extends StatefulWidget
Widget appBarTitle = new Text("Contacts");
Icon actionIcon = new Icon(Icons.search);

@override
State<StatefulWidget> createState()
return new _ContactPage();




class _ContactPage extends State<ContactsPage>
@override
Widget build(BuildContext context)
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: widget.appBarTitle,
actions: <Widget>[
new IconButton(
icon: widget.actionIcon,
onPressed: ()
setState(()
if (widget.actionIcon.icon == Icons.search)
widget.actionIcon = new Icon(Icons.close);
widget.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
prefixIcon:
new Icon(Icons.search, color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)),
onChanged: (value)
print(value);
//filter your contact list based on value
,
);
else
widget.actionIcon =
new Icon(Icons.search); //reset to initial state
widget.appBarTitle = new Text("Contacts");

);
,
),
],
),
body: new ContactList(kContacts)),
// replace the body with your contacts list view
);



class ContactPage extends StatelessWidget
@override
Widget build(BuildContext context)
return new Scaffold(
appBar: new AppBar(
title: new Text("Contacts"),
),
body: new ContactList(kContacts));




class ContactList extends StatelessWidget {
final List<Contact> _contacts;

ContactList(this._contacts);

@override
Widget build(BuildContext context) {
return new ListView.builder(
padding: new EdgeInsets.symmetric(vertical: 8.0),
itemBuilder: (context, index)
return new _ContactListItem(_contacts[index]);
,
itemCount: _contacts.length,

class ContactsPage extends StatefulWidget
@override
_SearchBar createState() => new _SearchBar();



class _SearchBar extends State<ContactsPage>
Widget appBarTitle = new Text("Search Contacts...");
Icon actionIcon = new Icon(Icons.search);
@override
Widget build(BuildContext context)
return new Scaffold(
appBar: new AppBar(
centerTitle: true,
title:appBarTitle,
actions: <Widget>[
new IconButton(icon: actionIcon,onPressed:()
setState(()
if ( this.actionIcon.icon == Icons.search)
this.actionIcon = new Icon(Icons.close);
this.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,

),
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search,color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)
),
);

);
,),]
),
);



class _ContactListItem extends ListTile
_ContactListItem(Contact contact)
: super(
title: new Text(contact.fullName),
leading: new CircleAvatar(child: new Text(contact.fullName[0])));



Updated:
Contact data Class:

class Contact
final String fullName;


const Contact(this.fullName);




const kContacts = const <Contact>[
const Contact(
fullName: 'Someone someone',

),
];


kContacts

1 Answer
1

I have updated the code with predictive search and removed the unused codes.

import 'package:flutter/material.dart';

class Contact
final String fullName;

const Contact(this.fullName);


void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: ContactsPage(),
));

class ContactsPage extends StatefulWidget
Widget appBarTitle = new Text("Contacts");
Icon actionIcon = new Icon(Icons.search);
final List<Contact> contacts = [
Contact(
fullName: 'Ganesh',
),
Contact(
fullName: 'Dinesh',
),
Contact(
fullName: 'Somesh',
),
Contact(
fullName: 'Ramesh',
)
];

@override
State<StatefulWidget> createState()
return new _ContactPage(contacts);



class _ContactPage extends State<ContactsPage>
List<Contact> filteredContacts;

_ContactPage(this.filteredContacts);

@override
Widget build(BuildContext context)
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: widget.appBarTitle,
actions: <Widget>[
new IconButton(
icon: widget.actionIcon,
onPressed: ()
setState(()
if (widget.actionIcon.icon == Icons.search)
widget.actionIcon = new Icon(Icons.close);
widget.appBarTitle = new TextField(
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
prefixIcon:
new Icon(Icons.search, color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)),
onChanged: (value)
filterContacts(value);
,
);
else
widget.actionIcon =
new Icon(Icons.search); //reset to initial state
widget.appBarTitle = new Text("Contacts");
filteredContacts = widget.contacts;

);
,
),
],
),
body: new ContactList(filteredContacts)),
// replace the body with your contacts list view
);


void filterContacts(String value)
var temp = widget.contacts.where((contact)
return contact.fullName.contains(value);
).toList();
setState(()
filteredContacts = temp;
);



class ContactList extends StatelessWidget
final List<Contact> _contacts;

ContactList(this._contacts);

@override
Widget build(BuildContext context)
return ListView.builder(
itemBuilder: (context, index)
return new _ContactListItem(this._contacts[index]);
,
itemCount: this._contacts.length,
padding: new EdgeInsets.symmetric(vertical: 8.0));



class _ContactListItem extends ListTile
_ContactListItem(Contact contact)
: super(
title: new Text(contact.fullName),
leading: new CircleAvatar(child: new Text(contact.fullName[0])));



Refer the screen shots:

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.