Flutter PokéDex

There are plenty of examples and tutorials out there showing how to couple Flutter with BaaS (mostly Firebase) or making calls to existing APIs

This PokéDex calls endpoints from a Node/Express server coded from scratch. Except doing something different from the canonical Flutter/BaaS approach, another reason behind it was to avoid making too many http requests to the well known PokéAPI API to get the data I wanted to display

Main Flutter-related features:

• Given the huge number of pokemons (e.g. 807 in total in this app), network images are cached (see cached_network_image package)
• BLoC (see Business Logic Component) approach to separate main pokemon-related state data from the UI via the combo of Provider<T>, Consumer<T> (see provider package) and StreamBuilder<T> (see Dart doc)
  • Note redux can also be used for app state management but I do not find it as user-friendly as it is when working with React

Demo

• Screen 1: SliverGrid with elastic back-to-top animation triggered by FloatingActionButton
• Screen 2: Hero tag for image animation and custom TabBar
• Screen 3: Seach bar within CustomScrollView's SliverAppBar and custom route to navigate to other family chain member detail page

||