title: How to implement a Flutter Search App Bar
body: <p>There are a lot of tutorials but rather than help me to move forward, I get lost in all possible options or I don't know how to improve the code (I would like to use an application that displays a list that use more than only the name of three fruits or three cities ?)</p>
  <p>I found tutorials to create a nice SearchBar with the ability to display the result based on the first letters typed.</p>
  <p>I don't understand how to edit the tutorial with a data list that includes a title associated with the content.
  I don't understand how to display the result if the first letter is lowercase or uppercase.
  Would it be possible to help me to make a simple basic code that could serve everyone including beginners like me?</p>
  <p>DataList.dart</p>
  <pre><code>List&lt;ListWords&gt;  listWords = [
    ListWords('oneWord', 'OneWord definition'),
    ListWords('twoWord', 'TwoWord definition.'),
    ListWords('TreeWord', 'TreeWord definition'),
  ];
  
  class ListWords {
    String titlelist;
    String definitionlist;
  
    ListWords(String titlelist, String definitionlist) {
      this.titlelist = titlelist;
      this.definitionlist = definitionlist;
    }
  }
  </code></pre>
  <p>Searchbar.dart</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:test_searchbar/DataList.dart';
  
  class SearchBar extends StatelessWidget {
  
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Search App'),
          actions: &lt;Widget&gt;[
            IconButton(icon: Icon(Icons.search),
                onPressed: () {
                  showSearch(context: context, delegate: DataSearch(listWords));
                })
          ],
        ),
        drawer: Drawer(),
      );
    }
  }
  
  class DataSearch extends SearchDelegate&lt;String&gt; {
  
    final List&lt;ListWords&gt; listWords;
  
    DataSearch(this.listWords);
  
  
    @override
    List&lt;Widget&gt; buildActions(BuildContext context) {
      //Actions for app bar
      return [IconButton(icon: Icon(Icons.clear), onPressed: () {
        query = '';
      })];
    }
  
    @override
    Widget buildLeading(BuildContext context) {
      //leading icon on the left of the app bar
      return IconButton(
          icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow,
            progress: transitionAnimation,
          ),
          onPressed: () {
            close(context, null);
          });
    }
  
    @override
    Widget buildResults(BuildContext context) {
      // show some result based on the selection
      return Center(
        child: Text(query),
  
      );
    }
  
    @override
    Widget buildSuggestions(BuildContext context) {
      // show when someone searches for something
      final suggestionList = query.isEmpty
          ? listWords
          : listWords.where((p) =&gt; p.startsWith(query)).toList();
  
  
  
      return ListView.builder(itemBuilder: (context, index) =&gt; ListTile(
        onTap: () {
          showResults(context);
        },
        trailing: Icon(Icons.remove_red_eye),
        title: RichText(
          text: TextSpan(
              text: suggestionList[index].titlelist.substring(0, query.length),
              style: TextStyle(
                  color: Colors.red, fontWeight: FontWeight.bold),
              children: [
                TextSpan(
                    text: suggestionList[index].titlelist.substring(query.length),
                    style: TextStyle(color: Colors.grey))
              ]),
        ),
      ),
        itemCount: suggestionList.length,
      );
    }
  }
  </code></pre>