“30 Days Of Flutter” with FlutLab: Code Party 3

We have passed the first essential week of #30DaysOfFlutter. I hope you’ve accumulated a lot of knowledge from the Flutter Team and had a pleasant experience from FLutLab IDE too.

I’ve got have some inside information from the FlutLab Team ;). They’re going to roll out a powerful update that has to enhance the usability of Flutter Online IDE significantly.

You finished 2 Codelabs prepared by Flutter Team and this is awesome! But why should we stop the party? How about adding a Search Bar to the “Startup Name Generator” app. This should be a fun exercise!

If you missed our “Code Parties”, don’t worry. You can visit them at:
“30 Days Of Flutter” with FlutLab: Code Party 1
“30 Days Of Flutter” with FlutLab: Code Party 2

If you want to get the latest version of the “Startup Name Generator - part 2” app, pick it at FlutLab Widget Bay: “Startup Name Generatoк - part 2”

We will call the next version of the app “Startup Name Generator - part 3”. Fill free to rename it if you wish.

For building our Search function we are going to use this cool package flutter_search_bar 2.1.0, which will do all the heavy lifting for us.

Our target is a new Search feature, which can search Startup names by entered characters.

1. Select pubspec.yaml file and add flutter_search_bar: ^2.1.0 to the dependencies list:

2. Open the main.dart file and add
import 'package:flutter_search_bar/flutter_search_bar.dart';

3. In the previous version of the app, we had an infinite number of generated words. This will not work for the search function. So we need to put some limits here. Let’s put it to 10000. You can modify this number if needed.

Comment or remove this line: final _suggestions = <WordPair>[];

Then add a new one:

final List<WordPair> _suggestions = generateWordPairs().take(10000).toList();

4. Let’s follow the Readme of the flutter_search_bar package. First of all, we need to add this line: SearchBar _searchBar;

5. SearchBar has an entrance in the AppBar. So we need to add an additional method buildAppBar. Also, let’s add our old icon there.

AppBar buildAppBar(BuildContext context) {
  return new AppBar(
    title: Text('Startup Name Generator'),
    actions: [
      _searchBar.getSearchAction(context),
      IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
    ],
  );
}

6. Let’s remove the old version of the AppBar from Scaffold:

appBar: AppBar(
   title: Text('Startup Name Generator'),
   actions: [
      IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
   ],
),

Add the appBar from the SearchBar:

appBar: _searchBar.build(context),

7. Now we have to add some filtering logic to our list of WordPairs. If the filter string is empty, we’ll show the original list. If there are some characters - we’ll apply the filtration:

List<WordPair> _filteredSuggestions = <WordPair>[];
//filter for search
void set filter(String value) {
  if (value.isEmpty) {
    _filteredSuggestions = _suggestions;
  } else {
   String filter = value.toLowerCase();
   _filteredSuggestions = _suggestions.where((element) =>
   element.asLowerCase.startsWith(filter)).toList();
  }
}

8. Let’s create the _searchBar object inside the constructor of our State object page.

RandomWordsState() {
  _searchBar = new SearchBar(
    inBar: false,
    buildDefaultAppBar: buildAppBar,
    setState: setState,
    onCleared: () {
      setState(() {
        filter = '';
      });
    },
    onChanged: (String value) {
      setState(() {
        filter = value;
      });
    },
    onClosed: () {
      setState(() {
        filter = '';
      });
    });
  filter = '';
}

9. Instead of the old logic of “unlimited scrolling” (remove this):

if (index >= _suggestions.length) {
  _suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return _buildRow(_suggestions[index]);

Add a new logic of application of our filter.

return _buildRow(_filteredSuggestions[index]);

10. Don’t forget about empty lines between WordPairs in our ListView:

itemCount: _filteredSuggestions.length * 2,

11. Congratulations! Press the “Build” button.

Finally, you’ve got your version of the “Startup Name Generator” app with Search.

Awesome! You finished the 5th-day of the agenda #30DaysOfFlutter!

If you’ve stacked with some problems, visit FlutLab Widget Bay and find the source code of this challenge under the 30 Days Of Flutter category. You can just fork this Widget Bay project into your FlutLab account and play with it.
Good luck!