知道應用程序內的信息作為列表存在於另一個 class 中，我如何使用 flutter 中的搜索

Question

在這個應用程序中，我有一個在應用程序中找到的書籍名稱列表如何創建搜索 function 並在其中調用列表，然后在單擊搜索結果時調用 go 到結果

class 書擴展 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 是書單出現的地方

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 帶到搜索 function 而我需要從應用程序中帶來的

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