/game_center

A simple Game center Apps in maintainable, scalable, and testable manner

Primary LanguageDart

Game Center App

Hi readers, I'm kinda excited to share you the journey when I build a simple app using Flutter. So, recently this week I received an assignment to build an app that help us to explore PS5 games. Then we will name it "Game Center" App. Before we start, I made some important points that will guide the development process:

  1. Looking for UI/UX Ideas
  2. Toolkit & External libraries
  3. Clean and Complete architecture
  4. Start Developing the module
  5. Build and deploy Apps

Ok, I think that's enough as an introduction, now without any further ado lets start our journey guys!

Looking for UI/UX ideas

This part is quite challenging for me because I am not an artist, but I have idealism to try to get the perfect design even if it doesn't exist. So to save time, I made a quick selection of dribbble:

Preview 1 Preview 2

I like the first design, but the dark theme seems more suitable for game center app. So, mixing them will be cool.

Mixed

Toolkit & External libraries

We must prepare the toolkit and determine which external library to use. Here are the toolkit and SDK that I'm using in this assignment:

  1. Macbook Pro M1 2020
  2. Flutter Version Manager (FVM) + Sidekick GUI
  3. Flutter 3.3.1
  4. Latest Android Studio
  5. Latest Visual Code Insider with Extensions:
    • Awesome Flutter Snippets
    • bloc (required)
    • change-case
    • Dart (required)
    • Flutter (required)
    • Flutter Helpers
    • Dart Barrels Generator
    • GitLens — Git supercharged
    • Pubspec Assist
    • Todo Tree

For external libraries, I determine based on the needs of the use case only. Such as:

  1. auto_route -> A routing solution that helps us generate navigation automatically. The generated route can also be useful for Robust, clean and easier Deeplink navigation
  2. alice -> Http traffic observer, debugging made easily
  3. cached_network_image -> To load and cache network images
  4. catcher -> Error catcher handler, it allows us to manage errors even integrate them into firebase crashlytics easily.
  5. dio -> A powerful Http client for Dart,
  6. dio_cache_interceptor -> to cache the responses from [dio] automatically. It has many cache strategy,
  7. easy_localization && easy_localization_loader -> Easy and Fast internationalizing and localization for Flutter Apps
  8. envied -> Convert Environment variable to dart. This is a good and safe way to store env in our apps
  9. equatable -> to Simplify Equality Comparisons
  10. flutter_bloc -> Our main state management. I love using bloc and this help me a lot to develop great app
  11. fluttertoast -> to show native toast message
  12. google_fonts -> Use google font without import font files manually
  13. infinite_scroll_pagination -> Lazily load and display pages of items as the user scrolls down our screen. I will integrate this with Bloc.
  14. injectable -> to generate dependency injection using annotation
  15. json_annotation & json_serializable -> Data Model class generator that help us to generate a robust and clean model.
  16. shimmer -> Skeleton loader to create beautiful loading
  17. photo_view -> Interactive images viewer
  18. hive_flutter -> No Sql storage to keep errorlytics data
  19. flutter_markdown -> To preview markdown format

Seems like a lot, right? Don't worry, we will wrap most of them so we can just change the library without affecting the results.

Clean and Complete architecture

We will implement business requirements in a maintainable, scalable and testable manner. So we need to have a clean architecture that can suit our needs.

BLoC Pattern

Since we use BLoC as the main state management that manages User Interface changes based on the existing state. There are several terms and components used in the application of the BLoC Pattern:

  • Event is the input for BLoC. Typically, keypress events or any commands to load data.
  • State The screen will be adjusted based on the state generated from the BLoC.
  • Transition is a state that changes when the event is received and before the state is updated.
  • Bloc is the main component that sets the Events process to State. Our logic will be put in here.

Bloc Pattern

To support the application of BLOC, we need to use the BloC Pattern which consists of 3 main layers that are interconnected. This pattern will also have an influence on the project architecture used.

  • Layer 1: User Interface, The layer that contains all the UI components or what we call “widgets”. This component can be seen and interacted with by the user, for example a button, form or other clickable object.
  • Layer 2: BLoC or Cubit, This layer will be handling our business logic. It will act as a controller between UI and the data layers. E.g, email and password validation logic will be written here.
  • Layer 3: Repository, This layer will make requests to the Backend or manage data on local storage. Sqlite, hive, or Restful API will be held here..

Project Architecture

├──_localization_gen/
├──assets/
│  ├──images/
│  ├──localizations/
├──lib/
│  ├──config/
│  │  ├──injectable/
│  │  ├──routes/
│  │  ├──themes/
│  ├──constant/
│  ├──core/
│  │  ├──language/
│  │  ├──theme/
│  │  ├──errlytics/
│  │  ├──app_setting.dart
│  ├──env/
│  ├──modules/
│  ├──utils/
│  │  ├──helpers/
│  │  ├──services/
│  │  │  ├──rest_api_service/
│  │  │  ├──native_api_service.dart
│  ├──widgets/
│  │  ├──design_system/
│  │  ├──main.dart
│  │  ├──main.extend.dart
│  │  ├──main.library.dart
│  │  ├──main.import.dart
├──.env.*
├──analysis_options.yaml
├──build.yaml
├──pubspec.yaml
├──start_unix.sh

The architectural design of the project is adjusted to the needs of our app and the BLoC Pattern used to get a clean architecture. Here's a detailed explanation:

  • ├──assets/
    • ├──images/ → any images such as icons, illustrations, and logo
    • ├──localizations/ → all supported language localization file in .json format
  • |──config/
    • |──injectable/ → contains generated and initialization of dependency injection file
    • ├──routes/ → routes configuration , auth guard and generated routes file
    • ├──themes/ → theme configuration and color palette constant. Dark & Light
  • |──constant/ → any related constant for API endpoint path, custom icons data, error codes, generated localizations key, and assets path.
  • ├──core/
    • ├──language/ → Language module
    • ├──theme/ → Theme module
    • ├──errlytics/ → Alice and Errorlytics Observer module
    • ├──app_setting.dart → Configuration for base url API, default theme, supported language, logs flag, and so on
  • ├──env/ → selected and generated environment data from .env files
  • ├──modules/ → Main modules that contain related UI components, bloc, providers and repository. For e.g, profile, home, transaction
  • ├──utils/
    • ├──helpers/ → any reusable general helper class such as online connection checker, money or time formatting, and so on
    • ├──services/
      • ├──rest_api_service/ → restful API class handler
      • ├──native_api_service.dart → Class definition to generate dependency injection for any plugin we use.
  • widgets/ → All reusable widgets
    • ├──design_system/ → Reusable Design system widgets to reduce boiler plate
  • sh start_unix.sh/ → A generator script before build this app, run sh start_unix.sh -h for available commands

Build and Deploy Apps

How to Run and Build App

  • Run sh start_unix.sh -x int the root of project
  • Run flutter build apk to build apk
  • Run flutter run to run apk
  • If you are using Visual Code, just use F5 shortcut to run and debug app

Download APK

in case you just want to try the app, please download apk here https://github.com/ariefwijaya/game_center/releases/tag/v1.0.0

Video Demo

Screen.Recording.2022-10-25.at.09.21.52.mp4

Screenshots

Splash Onboarding Home Filter
splash onboarding home list
Search Detail 1 Detail 2 ErrorLytics Alice
search detail1 detail2 alice errlytics