In this application I have a list of the names of books found inside the application How can I create a search function and call the list within it and then go to the results when I click on the search results
class Book extends StatelessWidget {
var MainList =[
{
'image' : 'images/a_dot_ham.jpeg',
'name': 'book 1',
'writer': 'ِmark',
'date' : '2007',
},
{
'image' : 'images/a_dot_ham.jpeg',
'name': 'book 2',
'writer': 'ِjon',
'date' : '2003',
},
{
'image' : 'images/a_dot_ham.jpeg',
'name': 'book 3',
'writer': 'ِalex',
'date' : '1997',
},
];
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text('Books'),
centerTitle: true,
),
body: ListView.builder(
itemCount: MainList .length,
itemBuilder: (context , i){
return
BookList (
image :MainList [i]['image'],
name :MainList [i]['name'] ,
writer: MainList [i]['writer'],
date: MainList [i]['date'],
);},
),
);}
}
Next class is where the book list will appear
class BookList extends StatelessWidget {
final image ;
final name;
final writer;
final date;
BookList({this.name,this.writer,this.image,this.time,this.date});
@override
Widget build(BuildContext context) {
return InkWell(child: Container(
height: 100,
width: 100,
child: Card(
child: Row(children: <Widget>[
Expanded( flex: 1,child: Image.network(image),),
Expanded(flex: 2 ,child: Container(padding: EdgeInsets.only(right: 4),
alignment: Alignment.topRight,
child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
Text(name,style: TextStyle(fontSize: 18)),
Row(children: <Widget>[
Expanded(child: Row(children: <Widget>[Text('date: ') , Text(date,style: TextStyle(color: Colors.grey),)] ),),
Expanded(child: Row(children: <Widget>[Text('writer: ') , Text(writer,style: TextStyle(color: Colors.grey),)] ))
],),
Row(children: <Widget>[
Expanded(child:Row(children: <Widget>[Text('name: ') , Text(name,style: TextStyle(color: Colors.grey),)] ) ),
],),
],)),)
],),
),),
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return BookDetails(name: name , writer: writer , date: date ,image: image,);
}
));
},);
}}
So how do I call this list in the search bar and when clicking on a specific book moves to its details.
When searching I found that the explanations speak of communication from an external database and the data is brought by url to the search function while I need to bring it from within the application
add the following code:
TextEditingController _textController = TextEditingController();
List<String> newMainList= List.from(MainList);
onItemChanged(String value) {
setState(() {
newMainList = MainList
.where((string) => string.toLowerCase().contains(value.toLowerCase()))
.toList();
});
}
Add this where you want your searchbar to appear:
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
controller: _textController,
decoration: InputDecoration(
hintText: 'Search Here...',
),
onChanged: onItemChanged,
),
),
Expanded(
child: ListView(
padding: EdgeInsets.all(12.0),
children: newSightsList.map((data) {
return ListTile(
title: Text(data),
onTap: (){
//add what to do onTap here
},
);
}).toList(),
),
);
],
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.