HarmonyOS Flutter in action: 22 - Hybrid development details - 2 - Har package mode introduced

Load the project as a Har package

Create a job

Create a root directory

mkdir ohos_flutter_module_demo

This directory is used to store Flutter projects and HarmonyOS projects.

Create a Flutter module

First, we create a Flutter module, and we choose a directory that is sibling to the ohos_app project

flutter create --template=module my_flutter_module

If you use fvm, first make sure that the flutter version used in the current directory is the SDK version of HarmonyOS, for example, you can use 'fvm use custom_3.22.0' setting, and then add fvm before the flutter command, and the above command will become 'fvm flutter create --template=module my_flutter_module'

The following output appears from the command line:

Creating project my_flutter_module...
Resolving dependencies in `my_flutter_module`...
Downloading packages...
Got dependencies in `my_flutter_module`.
Wrote 12 files.

All done!
Your module code is in my_flutter_module/lib/main.dart.

After the Flutter module is successfully created, the directory structure is as follows:

Create a DevEco project

Use DevEco to create a new project named ohos_app in the ohos_flutter_module_demo directory.

Note that the saved directory is xxxx/ohos_flutter_module_demo/ohos_app

After the directory is created, the entire directory structure is as follows:

As you can see, we've placed the Flutter module at the same level as the ohos_app project. my_flutter_module automatically creates the .ohos directory, which is also a simple HarmonyOS project, but with a module called flutter_module.

Package the Flutter module into a Har package

Next, we use the 'flutter build har' command to package the Flutter module into a har package.

Before packaging, first configure the signature, open the .ohos directory with DevEco, and then sign the project, as follows:

DevEco Studio opens the my_flutter_module/.ohos project and configures the debugging signature (File -> Project Structure -> Signing Configs, check Automatically generate signature)

flutter build har --debug

The following output appears from the command line:

Running Hvigor task assembleHar...                                 47.5s

Consuming the Module
    1. Open <host project>/oh-package.json5
    2. Add flutter_module to the dependencies list:

      "dependencies": {
        "@ohos/flutter_module": "file:path/to/har/flutter_module.har"
      }

    3. Override flutter and plugins dependencies:

      "overrides" {
        "@ohos/flutter_ohos": "file:path/to/har/flutter.har",
      }

If you look at the directory 'my_flutter_module/.ohos/har', you can see that the Har package for the Flutter module has been generated, and two files have been generated in it, flutter_module.har and flutter.har.

Note that the generated flutter_module.har is the default name and has nothing to do with the project name. If you want to change the name of the build, you can change the package name in the my_flutter_module/.ohos/flutter_module/oh-package.json5 file.

Introduce the HARs package into the ohos project

Next, we copy the generated HAR package to the host project ohos, and then go back to the OHOS project to add the HAR package generated above to the dependency configuration.

Copy the HAR package

cp -r my_flutter_module/.ohos/har/* ohos/har/

Edit the ohos_app/oh-package.json5 file:

  "dependencies": {
    "@ohos/flutter_module": "file:har/my_flutter_module.har",
    "@ohos/flutter_ohos": "file:har/my_flutter.har"
  },
  "overrides" {
    "@ohos/flutter_ohos": "file:har/flutter.har",
  }

2> Note: If you do not want to use the method of copying the Har package, you can also directly import the location of the original Har through a relative path, you can use the following methods:

  "dependencies": {
    "@ohos/flutter_module": "file:../my_flutter_module/.ohos/har/flutter_module.har",
    "@ohos/flutter_ohos": "file:../my_flutter_module/.ohos/har/flutter.har"
  },
  "overrides": {
    "@ohos/flutter_ohos": "file:../my_flutter_module/.ohos/har/flutter.har"
  },

In order to solve the dependency conflict, because '@ohos/flutter_module' depends on '@ohos/flutter_ohos', but because it is a relative directory, it will cause loading failure, so here we use overrides to re-specify the path of '@ohos/flutter_ohos'.

In addition, unlike the above tips or official documentation, we have also added '@ohos/flutter_ohos' to dependencies, which is for the problem of IDE prompting, otherwise the following error message will appear

Cannot find module '@ohos/flutter_ohos' or its corresponding type declarations. <ArkTSCheck>

Finally, sign the ohos project again and run the DevEco project.

Now we're just introducing the Har package into the ohos project, and in the next article Jump to Flutter page, we will introduce how to initialize the Flutter engine in the ohos native project, and jump to open the Flutter page where appropriate.

Summary

This model is suitable for larger project teams, and the common scenario is that the colleague in charge of Flutter development develops the specified module and delivers it to the HarmonyOS native development team in the form of a Har package.
In this mode, the HarmonyOS native development team does not need to pay much attention to the content of the Flutter part, or even need to install the Flutter development environment, which can better segregate duties.
Disadvantages, because the Flutter module is packaged into a Har package, which exists as a so file, so Flutter cannot be hot-reloaded.