Introduction

In the previous article [Mixed Development Details-2-Har Package Mode Introduction](./HarmonyOS Flutter Practice: 22-Mixed Development Details-2-Har Package Mode Introduction.md), we introduced how to package Flutter modules into Har packages and introduce them into the native HarmonyOS project. In this article, we will introduce how to introduce Flutter modules into native HarmonyOS projects through source code dependencies.

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

After opening the my_flutter_module/.ohos project in DevEco Studio, configure the debugging signature (File -> Project Structure -> Signing Configs, check Automatically generate signature, and then click Apply, OK.

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.

Configure source dependencies

. OHOS soft connection to the main project

Due to the [Open Source HarmonyOS Official Documentation] ( https://gitcode.com/openharmony-sig/flutter_samples/blob/br_3.7.12-ohos-1.1.0/ohos/docs/04_development/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B7%B7%E5%90%88%E5%BC%80%E5%8F%91%20module.md The solution given in is not ideal, and here we use the soft connection solution to achieve linkage development based on source code.

Under normal circumstances, after the my_flutter_module is successfully created, it will contain a .ohos directory, which is a HarmonyOS project (containing flutter_module modules), which can be used as a host for Flutter. But this host project is not what we expect ohos_app, and the two projects are not related, so they cannot be developed in tandem.

So we do the following:

# ⚠️ First of all, you need to copy the flutter_module to the HarmonyOS 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/

# Go to the my_flutter_module of the directory and create a soft connection here
cd my_flutter_module
# Delete the .ohos directory
rm -rf .ohos
# Create a soft connection to the HarmonyOS host project and change the directory name as needed
ln -s .. /ohos_app .ohos

Through the above operation, we replaced the .ohos directory with the ohos_app Harmony project in the form of soft connection, so that when we run Flutter code, we will use ohos_app as the host, so that the linkage source code development is realized, and hot reload is also supported.

Update the project

After that, we run 'flutter run' and let Flutter automatically update the project configuration

# Run the flutter code to update the HarmonyOS project directory
flutter run

Looking at 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"
+ }
]

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

You can see that when you run '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

After a bit of waiting, our app is up and running, showing a native page with the Flutter engine and Flutter page not loading, which we'll cover in the next sections.

HarmonyOS Flutter in action: 23 - Hybrid Development Details - 3 - Source Code Mode Introductio