A demo of some favorite Flutter libraries working together
Note: To make this code work and retrieve data from the API you will need to add a ".env" file to the root that looks something like this ...
RAPIDAPIKEY="a59228f25bmsh.......n185850d3e6a7" GAMEAPIKEY="074e582b9cba4......dab98fc6d65"
- Where the first is your (free) api key from https://rapidapi.com/
- And the second is your (free) api key from https://rawg.io/
- And I could probably include the API keys I have (as they are not "secret") but that is not good practice for source control or GitHub as a whole ... but let me know if this is a huge roadblock for you
The idea for this app came from a starter discussion in the fledgling West Michigan Flutter Discord discussion group (https://discord.gg/gvu8HFFQ)
The idea was to create a sample app using some of your favorite Flutter packages to show how they work together.
- Flutter Favorites
- code generation stuff
- riverpod - for easy state management
- dio - for an http client for API calls
- go_router - for painless Navigation 2.0 routing on all platforms, and clean web URIs
- fonts, colors, and graphics
- flutter_svg - library to render svg files in Flutter
- lottie - library to render Lottie (Adobe After Effects) animations in Flutter
- font_awesome_flutter - library to easily access Font Awesome Icons in Flutter
- flex_color_scheme - a nice library that easily combines colors and schemes and fonts
- google_fonts - enables access to the library of Google Fonts
- Pages
- Services
- Models
- Game API
- genre.dart - the game genres from the API
- game.dart - the game details from the API
- genreapiresult.dart - the raw result from the genre API - generated largely from https://jsontodart.com/ - with parts passed to the above other classes
- gameapiresult.dart - the raw result from the game API - generated largely from https://jsontodart.com/ - with parts passed to the above other classes
- authentication.dart - the authentication immutable state object
- user.dart - the user immutable object
- Game API
For this app I chose to highlight some packages I like including ...
freezed - for easy creating of immutable objects / code-gen
json_serializable - for easy creating of serializable/deserializable objects / code-gen
envify - for reading secrets in from environment files (in this case API keys)
build_runner - for doing the code-gen
riverpod - for easy state management
dio - for an http client for API calls
go_router - for painless Navigation 2.0 routing on all platforms, and clean web URIs
flutter_svg - library to render svg files in Flutter
lottie - library to render Lottie (Adobe After Effects) animations in Flutter
font_awesome_flutter - library to easily access Font Awesome Icons in Flutter
flex_color_scheme - a nice library that easily combines colors and schemes and fonts
google_fonts - enables access to the library of Google Fonts
I borrowed a nice login page from https://github.com/skanaujiya/Login-App which was very nice looking. And I wired it up to the Authentication provider (RiverPod - below).
I used the RapidAPI implementation of the RAWG.io video game API endpoint to get a list of video game genres to display on this page. This uses the Dio http client inside a RiverPod Notifier (below).
Grabs some detail information in the Genres call and passes it on to the detail page
Makes another call to the game api to get game details to show more on another page.
Wanted to have a settings page that could change theme / colors and show off the fonts and themes updates in the flex_color_scheme library
A wrapper for the RapidAPI implementation of the RAWG.io video game API endpoints.
This is honestly just a mock for a fake authentication module to hold the state for a logged in user. This could be any kind of custom or Firebase auth module.
An ability to track the changing state of the application for logging and debugging purposes.
How to include secrets (in this case API keys (which, I know, aren't technically "secret")) in code but not necessarily include them in source control (but can inject them in the build process, etc.)
Note - each model will include a *.freezed.dart which is the part of the model/class that is the immutable part of the class (created by "freezed") (with associated methods) and a *.g.dart part of the class which is the serialization/deserialization part of the class (which is generated by "json_serializable").