Searchable materials

[bmhenry]

Adds a search bar to the Bank > Materials page, that updates the displayed items as the search is changed. Materials categories that are empty after the search filter are hidden.

Related Issue

https://github.com/DanielScholte/GuildWars2Companion/issues/76

How Has This Been Tested?

Manual testing on a Pixel 5 (see recording).

Screen recording:

[bmhenry]

It looks like I could pretty easily implement this for the Bank > Bank tab as well, and maybe the character inventory. However, I've never touched Flutter before other than a tutorial so I figured I'd stop with Materials and wait for feedback first. Definitely open to constructive criticism

[DanielScholte]

Thanks for the pull request, the implementation looks good!
I'd be willing to merge it, but I think a few improvements could be applied to make it more generalized, and be able to apply it to multiple pages, items and others such as achievements.
If you are willing to do that, I can give you a few remarks as for how I think you could implement it.
You could create a general Search page, that has a builder function as a parameter. From there, you can have the page execute the builder function to display the item/achievement widgets. The builder function has the search string as a parameter, so you can filter the items/achievements based on that string, and return the relevant widgets.
It could look something like this:

class SearchPage extends StatefulWidget {
  final Widget Function(BuildContext, String) builder;

  SearchPage({
    @required this.builder
  });

  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  String _search = "";

  @override
  Widget build(BuildContext context) {
    // Use widget.builder(context, _search) inside the body
  }
}

You can then open the SearchPage when the user presses a search icon in the AppBar of for example the BankPage:

Navigator.of(context).push(MaterialPageRoute(
    builder: (context) => SearchPage(
        builder: (context, search) => // Return the items filtered by the search string
    )
))

Let me know if you would like to implement something like that, or if you have any other suggestions :)

[bmhenry]

That seems like a good idea, I'll give that a whirl

[bmhenry]

Pretty much just copied what you wrote 😃 Went ahead and added it for regular bank tab as well.

[DanielScholte]

First of all, my apologies for the late reply.
Looks good, but it wasn't quite what I had in mind.
I was thinking of making it an actual separate page.

For instance, on the item page, there would be a button like this:

Which would open a new page using Navigator.of(context).push(...) on which you can search, with perhaps the searchbar in the title?

Let me know what you think :)

[bmhenry]

I've taken a quick look but haven't had time to get it done quite yet 🙂 Looks like I'll probably end up modifying some of the existing page/appbar constructors to do this, but not entirely sure yet. An entirely new page that wraps some of the existing utilities might just work better.