DEV Community

Cover image for HarmonyOS Flutter Practice: 23-Hybrid Development Detailed Explanation-3-Source Code Mode Introduction
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter Practice: 23-Hybrid Development Detailed Explanation-3-Source Code Mode Introduction

#harmonyos #flutter

Introduction

In the previous article Hybrid Development Detailed Explanation-2-Har Package Mode Introduction, we introduced how to package the Flutter module into a Har package and introduce it into the native Harmony project. In this article, we will introduce how to introduce the Flutter module into the native Harmony project through source code dependency.

Create work

Create a root directory 

mkdir ohos_flutter_module_demo
Enter fullscreen mode Exit fullscreen mode

This directory is used to store flutter projects and Harmony projects.

Create a Flutter module

First, create a Flutter module. We choose the same directory as the ohos_app project

flutter create --template=module my_flutter_module
Enter fullscreen mode Exit fullscreen mode

If fvm is used, first make sure that the flutter version used in the current directory is the Harmony SDK version. For example, you can use fvm use custom_3.22.0 to set it, and then add fvm before the flutter command. The above command becomes fvm flutter create --template=module my_flutter_module

The following output appears on 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.
Enter fullscreen mode Exit fullscreen mode

Create Flutter After the 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 DevEco project is created, sign the project as follows.

Open the my_flutter_module/.ohos project in DevEco Studio and configure the debug signature (File -> Project Structure -> Signing Configs, check Automatically generate signature), then click Apply and OK.
Enter fullscreen mode Exit fullscreen mode

After successful creation, the entire directory structure is as follows:

As you can see, we put the Flutter module at the same level as the ohos_app project. The .ohos directory is automatically created in my_flutter_module, which is also a simple Harmony project, but it will contain a module named flutter_module.

Configure source code dependencies

.ohos soft link to the main project

Since the solution given in the Open Source Harmony Official Document is not ideal, here we use the soft link solution to achieve source code-based linkage development.

Under normal circumstances, after my_flutter_module is successfully created, it will contain a .ohos directory, which is a Harmony project (containing the flutter_module module), which can be used as the host of Flutter. However, this host project is not the ohos_app we expected. The two projects have no connection, so they cannot be developed in conjunction.

So we do the following:

# ⚠️First, you need to copy flutter_module to the Harmony host project to avoid the error "Error: Parse ohos module.json5 error: Error: Can not found module.json5 at"
cp -r my_flutter_module/.ohos/flutter_module ohos_app/

# Enter the directory my_flutter_module and create a soft link here
cd my_flutter_module
# Delete the .ohos directory
rm -rf .ohos
# Create a soft link to the Harmony host project and change the directory name as needed
ln -s ../ohos_app .ohos
Enter fullscreen mode Exit fullscreen mode

Through the above operations, we replace the .ohos directory with the ohos_app Harmony project in a soft link. In this way, when we run the Flutter code, ohos_app will be used as the host, which realizes the linkage source code development and supports hot reload.

Update the project

After the above operation, we run flutter run to let Flutter automatically update the project configuration

# Run the flutter code to update the Harmony project directory
flutter run
Enter fullscreen mode Exit fullscreen mode

Check the ohos_app/build-profile.json5 file, you can see that the command automatically adds the module configuration:

"modules": [
...
+ {
+ "name": "flutter_module",
+ "srcPath": "./flutter_module"
+ }
]
Enter fullscreen mode Exit fullscreen mode

Also check the ohos_app/har directory, you can see that the flutter.har file is automatically generated.

You can see that when running flutter run, the console outputs the following:

Launching lib/main.dart on FMR0224904009635 in debug mode...
start hap build...
...
Running Hvigor task assembleHap... 95.7s
✓ Built ../ohos_app/entry/build/default/outputs/default/entry-default-signed.hap.
installing hap. bundleName: com.shaohushuo.ohos_app
Enter fullscreen mode Exit fullscreen mode

After a while of waiting, our App is running. The application displays a native page, and the Flutter engine and Flutter page are not loaded. We will introduce these implementations in the next chapter.

References

Top comments (0)