知道应用程序内的信息作为列表存在于另一个 class 中，我如何使用 flutter 中的搜索

Question

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

Answer 1

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