Background
It turns out that the project developed with Flutter needs to adapt to HarmonyOS.
Environment setup
See the article [HarmonyOS Flutter Adaptation Guide] to set up a development environment and use fvm to manage multiple versions of SDKs.
Modularity
The original project remains modular, split into directories such as apps/common/components/modules/plugins, as follows:
.
├── README.md
├── analysis_options.yaml
├── melos.yaml
├── melos_ogw-flutter.iml
├── node_modules
├── packages
│ ├── README.md
│ ├── apps
│ │ ├── app
│ │ ├── dsm_app
│ │ ├── ohos_app
│ │ └── web
│ ├── common
│ │ ├── domains
│ │ ├── extensions
│ │ ├── services
│ │ └── widgets
│ ├── components
│ │ ├── image_uploader
│ │ ├── player
│ │ └── scroll_banner
│ ├── modules
│ │ ├── address
│ │ ├── community
│ │ ├── home
│ │ ├── invoice
│ │ ├── me
│ │ ├── message
│ │ ├── order
│ │ ├── shop
│ │ ├── support
│ │ ├── updater
│ └── plugins
│ ├── image_picker
│ ├── printer
├── pubspec.lock
├── pubspec.yaml
└── yarn.lock
Plugins are plugins that rely on the native platform,
components are platform-agnostic,
Common is domain objects, widgets, service classes, extensions, etc., platform-agnostic, and all of them are pure Dart code.
Apps are application shells that are packaged for different platforms by combining different modules.
Use Melos to manage multi-package repositories.
Among them, the projects under apps are the entrance projects that need to be packaged into various platforms and apps. It mainly contains project configuration code, module dependency configuration, and specific platform adaptation code.
Create a new HarmonyOS project in the apps directory, and first run the shell project in HarmonyOS to ensure that there are no problems. Add the dependencies in turn, first with a package written in pure dart, and then with a package that depends on native code/plugins. Pay attention to adding dependencies one by one, do not add too many dependencies at a time, so as to facilitate troubleshooting and positioning problems.
If the original project uses a lower version, you can upgrade the SDK dependency of the original project to 3.7, and if the SDK version of the original project is higher than 3.7, there are two options: one is to downgrade the SDK dependency of the original project to 3.7, and the other is to use a multi-branch solution.
If you need to use Flutter version 3.22, please refer to the article HarmonyOS Flutter Practice: 11 - Use Flutter SDK 3.22.0
Platform-specific engineering
Create a new project in the apps directory, which runs the HarmonyOS platform adaptation and packaging.
flutter create --platforms ohos ohos_app
The directory structure looks like this:
.
├── README.md
├── analysis_options.yaml
├── assets
│ ├── icons
│ │ ├── 2.0x
│ │ ├── 3.0x
│ │ └── placeholder.png
│ └── images
│ ├── 2.0x
│ └── 3.0x
├── build
│ ├── ...
├── env
├── lib
│ ├── config
│ │ ├── easy_refresh.dart
│ │ ├── routes.dart
│ │ └── theme.dart
│ └── main.dart
├── ohos
│ ├── AppScope
│ │ ├── app.json5
│ │ └── resources
│ ├── build-profile.json5
│ ├── entry
│ │ ├── build
│ │ ├── build-profile.json5
│ │ ├── hvigorfile.ts
│ │ ├── oh-package-lock.json5
│ │ ├── oh-package.json5
│ │ ├── oh_modules
│ │ └── src
│ ├── har
│ │ ├── ...
│ ├── hvigor
│ │ └── hvigor-config.json5
│ ├── hvigorfile.ts
│ ├── local.properties
│ ├── oh-package-lock.json5
│ ├── oh-package.json5
│ └── oh_modules
│ └── ...
├── pubspec.lock
└── pubspec.yaml
As you can see, the project is just a shell project, without too much code, mainly for some specific configurations of the project, such as themes, routes, etc., as well as the App entrance initialization configuration.
Edit the pubspec.yaml file to add component and module dependencies.
environment:
sdk: '>=2.19.6 <3.0.0'
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
# Pull down to refresh
easy_refresh: ^3.0.4+2
flutter_dotenv: ^5.1.0
go_router: ^6.0.0
# Domain Objects
domains:
path: '.. /.. /common/domains'
# Generic service class
services:
path: '.. /.. /common/services'
# Pure Dart UI components
widgets:
path: '.. /.. /common/widgets'
# Module: Shipping Address
address:
path: '.. /.. /modules/address'
# Module: Help Center
support:
path: '.. /.. /modules/support'
# Module: Personal Center
me:
path: '.. /.. /modules/me'
# Module: Message Notification
message:
path: '.. /.. /modules/message'
# Module: Orders
order:
path: '.. /.. /modules/order'
# Module: Marketplace
shop:
path: '.. /.. /modules/shop'
# Module: Homepage
home:
path: '.. /.. /modules/home'
Plug-in HarmonyOS adaptation
Some third-party plug-ins and other libraries that plug-ins depend on, if they are not compatible with HarmonyOS, you can configure the HarmonyOS version through override
dependency_overrides:
# ohos
path_provider:
git:
url: "https://gitcode.com/openharmony-sig/flutter_packages.git"
path: "packages/path_provider/path_provider"
Compile and run
Run the Flutter project, view the relevant logs and running interface, and deal with the issues that arise individually.
To view the logs, you can view the Flutter project logs in the IDE debug console where you run Flutter, and you can use the 'hdc hilog' command or DevEco to view the system logs.
Top comments (0)