In this blog post I share my experience with – Getting Back rx_bloc_cli Flutter App to be working on Multi-Platform environment.
Bootstrap new project
Bootstrap new project. You may use the CLI. I’ve done it from a package that wraps it as web app https://programtom.com/dev/product/vaadin-web-app-wrapper-for-rx_bloc_cli-projects-bootstrapping/
- create a project record (the name must be lower_case)
- create project – that will take some time, but will generate the boostraped code
- download
Fixing Setup
Fix Flutter / Dart class path stuff so the project could compile. execute flutter pub get – so the IDE could download the dependencies.
Fix Firebase with flutterfire_cli https://firebase.google.com/docs/flutter/setup?platform=ios / app_setup.dart
If you are doing this on Windows or Linux, you need to uncheck ios and macos and do this step again – when you are testing on ios/macos. The sneaky thing for Apple development is – you need Mac Desktop.
If you are targeting web – make sure to update firebase-messaging-sw.js/firebase_web_config.js files with the appropiate config.
The file environment_config.dart includes dar:io package – that is not present on the web. In general – once you have any back-end environment running – with SSL – you don’t need differentiation from the base URL.
Fixing Code
If you are going to have dart on the backend you could use the bootstrap as a base, otherwise – you may zip (just in case) and delete the “bin/server” folder.
Internationalization
In the currently tested by me version ( https://pub.dev/packages/rx_bloc_cli/versions – 3.5.1) if you don’t check the custom login option but, you do check social logins – there will still be present an import in family_tree_app_i18n.dart of login_lookup.dart That will break the initial compilation.
You may need to search a lot and dive deep – until you find that – you need to have it checked and to have the override:
@override
I18nFeatureLoginLookup createFeatureLoginLookup() => AppI18nLoginLookup();
login_page.dart also includes the dart:io package. If you just remove the package and clean up the usages – you will get the buttons, but they will not function. You need to create variations of the buttons there for the web.
Extensive Features
The rx_bloc_cli pagkage generates a project with
- Route Permissions/Flags for availability)
- Translations grabbed from the Back-End
They are application specific items so – they could be commented or removed in
- permissions_service.dart -> getPermissions.
- translations_service.dart ->_getTranslations
Web Run Config
There is no Run configuration that will run on web. This is because the build flavor variable cannot be passed on the Internet Platform. You coud clone the Development run configuration and rmeove the param.
After all the above – you will get the login sample page showing on the web.
Some more steps and clean-up is required – if you are not planning to include firebase in your app – like for example – if you plan to target some non-google app store (Amazon, Huawey, Galaxy, etc). But, this will be part of another blog post : https://programtom.com/dev/2024/03/28/clean-rx_bloc_cli-project-from-firebase/.