DEV Community

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

Posted on

HarmonyOS Flutter Practice: 14-Existing Flutter Projects Support Harmony II

#harmonyos #harmony #flutter

Introduction

In the previous article Harmony Flutter Practice: 09-Existing Flutter Projects Support Harmony, it was introduced how to transform the project to adapt to the Harmony platform.

The article describes the overall concept and ideas. This article goes a step further and explains in detail how to implement it, combined with practical project code.

Through modularization, Harmony Shell Project, and FVM management of multiple versions of Flutter SDK, the original Flutter code is kept pure and modified as little as possible, completing the Harmony adaptation example.

Code address of this project: https://gitee.com/zacks/flutter-ohos-demo

Preparation

1. Install FVM 

dart pub global activate melos
Enter fullscreen mode Exit fullscreen mode

2. Use FVM to install Flutter SDK

Install the official version 3.22 and the version 3.22.0 of the Harmony community

3. Build the Flutter Harmony development environment

Reference article "Harmony Flutter Practice: 01-Build Development Environment"

Build Project Architecture

Create a Directory 

# Create a Project Directory
mkdir flutter-ohos-demo
Enter fullscreen mode Exit fullscreen mode

Set the Flutter SDK version to use
It is recommended to execute the following command in the VsCode command line, which will create the .fvm directory, .vscode/setting.json file, and .fvmrc file

fvm use 3.22.0
Enter fullscreen mode Exit fullscreen mode

Initialize the workspace

Create a directory, the project structure is as follows:

.
├── packages
│ ├── apps #This directory is used to store the shell projects of each terminal application
│ ├── common #This directory is used to store common libraries, all of which are pure dart code and do not rely on native implementations such as ios/android
│ │ ├── domains #Domain objects, store various entity files, such as enumeration/model/vo/event, etc.
│ │ ├── extensions #Store extension class files, for class extension methods/attributes
│ │ ├── services #Service class: such as request service/authorization service/cache service/platform call service/routing service/tool ​​class, etc.
│ │ └── widgets #General small widgets, Flutter UI components written in pure dart
│ ├── components #Encapsulate component libraries, which can rely on third-party libraries/third-party plug-ins, or rely on plug-ins in plugins
│ │ ├── image_uploader
│ │ └── player
│ ├── modules
│ │ ├── address
│ │ ├── home
│ │ ├── me
│ │ ├── message
│ │ ├── order
│ │ ├── shop
│ │ └── support
│ └── plugins #Plugin library, self-encapsulated plugin library, code that depends on the native platform (ios/android)
│ └── printer
├── README.md
├── melos.yaml
└── pubspec.yaml
Enter fullscreen mode Exit fullscreen mode

Run melos bootstrap 

melos bootstrap
Enter fullscreen mode Exit fullscreen mode

Start writing code

Initialize the code in each package, such as running in the packages/common/domains directory

fvm flutter create --template package .
Enter fullscreen mode Exit fullscreen mode

Create shell project

Create two shell projects, one for app and the other for ohos_app

App shell project

Enter the package/apps/app directory and create an app project, which is an App project for packaging on various platforms (ios/android/mac, etc., excluding Harmony)

fvm flutter create --template app --org com.moguyun.flutter app
Enter fullscreen mode Exit fullscreen mode

Add dependencies

Modify pubspec.yaml and add the following content

services:
path: '../../common/services'
domains:
path: '../../common/domains'
widgets:
path: '../../common/widgets'

home:
path: '../../modules/home'
me:
path: '../../modules/me'
support:
path: '../../modules/support'
Enter fullscreen mode Exit fullscreen mode

Install dependencies

Run the following command to install dependencies

fvm flutter pub get
Enter fullscreen mode Exit fullscreen mode

Harmony Shell Project

Switch to Harmony Flutter SDK

First, in the root directory of the flutter-ohos-demo project, switch the Flutter version to the Harmony version

fvm use custom_3.22.0
Enter fullscreen mode Exit fullscreen mode

After the SDK is changed, you need to restart the IDE (or Dart: Restart Analysis Server) to restart the Flutter plug-in

Create the ohos_app project

Enter the packages/apps directory and create the ohos_app project

fvm flutter create --template app --platforms ohos --org com.moguyun.flutter ohos_app
Enter fullscreen mode Exit fullscreen mode

Add dependencies

Enter the pubspec.yaml in the packages/apps/ohos_app directory and add dependencies as well

services:
path: '../../common/services'
domains:
path: '../../common/domains'
widgets:
path: '../../common/widgets'

home:
path: '../../modules/home'
me:
path: '../../modules/me'
support:
path: '../../modules/support'
Enter fullscreen mode Exit fullscreen mode

Harmony-based third-party library

Edit the pubspec.yaml file and add the following configuration to replace the Harmony-based third-party library through dependency_overrides. Note that the Harmony-based library and the original library should keep the same version

# Harmony adaptation
dependency_overrides:
flutter_inappwebview:
git:
url: https://gitee.com/openharmony-sig/flutter_inappwebview.git
path: "flutter_inappwebview"
Enter fullscreen mode Exit fullscreen mode

Every time you modify pubspec.yaml, use fvm flutter pub get to update the dependency installation.

Run debugging

Use Deveco to open the apps/ohos_app/ohos directory.

In the upper left corner of Deveco, open File -> Project Structure..., click Siging Configs, check Automatically generate signature, and sign the Harmony project.

In the ohos_app directory, use fvm flutter run, or click the run button to run the flutter project.

Notes

  1. sdkPath: .fvm/flutter_sdk in the melos.yaml file configures the flutter SDK version used by melos, that is, the current project version configured by FVM

  2. Every time the Flutter SDK is switched, the .fvm/, vscode/settings.json files will be modified

  3. In dependency_overrides in ohos_app/pubsec.yaml, only add third-party libraries that need to be Harmony-based

  4. When building ohos-3.22, some har packages may be indeed. It is recommended to keep the ohos-Flutter version latest. If it still doesn't work, you can consider manually copying the har package (built with 3.7)

How to determine whether the third-party library needs to be Harmony-based? In short, if the third-party library is implemented by pure Dart, it does not need to be adapted separately and can be used directly; if the third-party library depends on the underlying implementation of the system, it needs to be adapted to Harmony.

For the adaptation of third-party libraries, you can check Gitee/Github, or refer to the table Flutter Third-party Library Adaptation Plan

  1. Known plug-in deletion issues. If you delete a plug-in, you may need to manually modify the code in ohos to remove related dependencies

ohos/oh-package.json5

Application screenshots

1.jpeg

640.jpeg

640 (1).jpeg

Summary

  1. Manage multiple Flutter SDK versions through FVM, and switch to ohos-flutter SDK only when packaging for HarmonyOS debugging

  2. Through the apps shell project, try to complete the HarmonyOS-adapted code in the ohos_app project. Through the dependency_overrides configuration managed by the pub package, replace the HarmonyOS-adapted third-party libraries one by one

  3. Manage multiple package projects through melos, modularize, componentize, and split the Flutter project into plug-ins, separate responsibilities, abstract platforms, and combine and package different platforms to effectively solve the problem of platform inconsistency

References

Top comments (0)