DEV Community

Cover image for HarmonyOS Flutter Practice: 09-Existing Flutter Projects Support Harmony
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter Practice: 09-Existing Flutter Projects Support Harmony

#harmonyos #flutter

Background

Projects originally developed with Flutter need to be adapted to Harmony.

Environment Construction

See the article [Harmony Flutter Adaptation Guide] to build a development environment and use fvm to manage multiple versions of SDK.

Modularization

The original project remains modularized and is split into directories such as apps/common/components/modules/plugins, as shown below:

. ├── 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
Enter fullscreen mode Exit fullscreen mode

  1. plugins are plugins that depend on the native platform,

  2. components are platform-independent components,

  3. common It contains domain objects, widgets, service classes, extensions, etc., which are platform-independent and all pure Dart code.

  4. apps is the application shell, which is packaged for different platforms by combining different modules.

  5. Use melos to manage multi-package repositories.

The projects under apps are the entry 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 Harmony project in the apps directory, run the shell project in Harmony first, and make sure there are no problems. Add dependencies one by one, first add packages written in pure dart, and then add packages that depend on native code/plugins. Pay attention to adding dependencies one by one, and do not add too many dependencies at a time, so as to facilitate troubleshooting and locating problems.

To solve the version dependency problem, the Harmony Flutter project currently needs to rely on version 3.7. If the original project uses a lower version, the original project SDK dependency can be upgraded to 3.7; if the original project SDK version is higher than 3.7, there are two solutions: one is to downgrade the original project SDK dependency to 3.7; the other is to use a multi-branch solution.

If you need to use Flutter version 3.22, see the article Harmony Flutter Practice: 11-Use Flutter SDK 3.22.0

Specific platform project

Create a new project in the apps directory, which runs the Harmony platform adaptation and packaging.

flutter create --platforms ohos ohos_app
Enter fullscreen mode Exit fullscreen mode

The directory structure is as follows:

. ├── 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
Enter fullscreen mode Exit fullscreen mode

As you can see, this project is just a shell project without much code. It mainly contains some specific configurations of the project, such as themes, routes, etc., as well as App entry initialization configuration.

Edit the pubspec.yaml file and 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' # Common service class services: path: '../../common/services' # Pure Dart UI components widgets: path: '../../common/widgets' # Module: Delivery 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: Order order: path: '../../modules/order' # Module: Mall shop: path: '../../modules/shop' # Module: Home Page home: path: '../../modules/home'
Enter fullscreen mode Exit fullscreen mode

Plugin Harmony Adaptation

For some third-party plugins and other libraries that plugins depend on, if they are not adapted to Harmony, you can configure the Harmony version through override

dependency_overrides: # ohos path_provider: git: url: "https://gitee.com/openharmony-sig/flutter_packages.git" path: "packages/path_provider/path_provider"
Enter fullscreen mode Exit fullscreen mode

Compile and run

Run the Flutter project, view the relevant logs and running interface, and deal with the problems separately.

To view the logs, you can view the Flutter project logs in the IDE debug console where Flutter is running, and you can use the hdc hilog command or DevEco to view the system logs.

Top comments (0)