在知道应用程序内部的信息以列表形式存在于另一个类中的情况下，我如何在flutter中使用搜索

Question

在这个应用程序中，我有一个在应用程序中找到的书籍名称列表。我如何创建一个搜索函数并调用其中的列表，然后在单击搜索结果时转到结果

class Book扩展了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'],
);},
),
);}
}

下一节课是书单将出现的

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

那么，我该如何在搜索栏中调用这个列表，当点击某本特定的书时，会移动到它的详细信息。

当搜索时，我发现解释谈到了来自外部数据库的通信，数据是通过url带到搜索功能的，而我需要从应用程序中带它

Answer 1

添加以下代码：

TextEditingController _textController = TextEditingController();
List<String> newMainList= List.from(MainList);
onItemChanged(String value) {
setState(() {
newMainList = MainList
.where((string) => string.toLowerCase().contains(value.toLowerCase()))
.toList();

});
}

将此添加到您希望搜索栏出现的位置：

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