rx_bloc_cli 0.0.3

rx_bloc_cli that enables quick project setup including: flavors, localization [intl], state management [rx_bloc], routing [auto_route], design system, analytics [firebase], tests

example/README.md

Test App

Project structure

Path	Contains
lib/base/	Common code used on more than one feature in the project.
lib/base/common_blocs/	Global BLoCs
lib/base/common_ui_components/	Reusable widgets (buttons, controls etc)
lib/base/common_use_cases/	Global UseCases
lib/base/extensions/	Global extension methods
lib/base/models/	Data models used in the project
lib/base/remote_data_sources/	External data sources like APIs. Here is placed all retrofit code.
lib/base/local_data_sources/	Local data sources, such as shared preferences, secured storage etc.
lib/base/repositories/	Repositories used to fetch and persist models.
lib/base/routers/	All routers are placed here. The main router of the app is lib/base/routers/router.dart.
lib/base/routers/guards/	The routers' guards of the app are placed here.
lib/base/theme/	The custom theme of the app
lib/feature_X/	Feature related classes
lib/feature_X/blocs	Feature related BLoCs
lib/feature_X/use_cases/	Feature related UseCases
lib/feature_X/ui_components/	Feature related custom widgets
lib/feature_X/views/	Feature related pages and forms
lib/main.dart	The main file of the app. If there are more that one main file, each of them is related to separate flavor of the app.

Feature structure

Each feature represents a separate flow in the app. They can be composed of one or more pages (screens) placed inside the features views directory. Every page (screen) should be implemented as a Stateless Widget.

The logic of each page should be placed into its own BLoC. This is desired especially if the page has to be a Stateful Widget. The BLoC is placed inside the blocs directory. In order for the BLoC to be more readable, its implementation details can be offloaded to its own extensions file ( [bloc_name]_extensions.dart, placed inside the same directory) or one or more usecases.

Architecture

Navigation

Navigation throughout the app is handled by Auto Route.

After describing your pages inside the lib/base/routers/router.dart file and running the shell script bin/build_runner_build.sh(or bin/build_runner_watch.sh), you can access the generated routes by using the context.navigator widget.

App localization

You app supports localization out of the box.

You define localizations by adding a translation file in the lib/l10n/arb/app_[language_code].arb directory. The language_code represents the code of the language you want to support (en, zh,de, ...). Inside that file, in JSON format, you define key-value pairs for your strings. Make sure that all your translation files contain the same keys!

Upon rebuild, your translations are auto-generated inside .dart_tool/flutter_gen/gen_l10n. In order to use them, you need to import the l10n.dart file from lib/l10n/l10n.dart and then access the translations from your BuildContext via context.l10n.someTranslationKey.

Analytics

Firebase analytics track how your app is used. Analytics are available for iOS, Android and Web and support flavors.

Before you start using analytics, you need to add platform specific configurations:

1. The iOS configuration files can be found at ios/Runner/Firebase/[flavor]/GoogleService-Info.plist
2. For Android the configuration files are located at android/app/src/[flavor]/google-services.json
3. All Web analytics configurations can be found inside lib/base/app/config/firebase_web_config.js

Every flavor represents a separate Firebase project that will be used for app tracking. For each flavor, based on the targeted platforms you'll have to download the configuration files and place them in the appropriate location mentioned above.

Design system

A design system is a centralized place where you can define your apps design. This includes typography, colors, icons, images and other assets. It also defines the light and dark themes of your app. By using a design system we ensure that a design change in one place is reflected across the whole app.

To access the design system from your app, you have to import it from the following locationlib/app/base/theme/design_system.dart'. After that, you can access different parts of the design system by using the BuildContext (for example: context.designSystem.typography.headline1 or context.designSystem.icons.someIcon).