Flutter App Development: Hongmeng HarmonyOS NEXT Beta Porting

Flutter app porting to HarmonyOS 5

Technical architecture

This article is applicable to the migration and adaptation of Flutter applications to the HarmonyOS system, and the technical solution is based on:

• Flutter OHOS branch (of company, river etc) (3.13.9+)

• HarmonyOS SDK 5.0.0(12)

• OpenHarmony API 10

• HVigor build system

Environment preparation

1. Basic environment configuration

subassemblyrequestVerify the commandDevEco Studio≥4.0 Beta2hdc -vHarmonyOS SDK≥5.0.0(12)hvigor -vNode.js≥18.15.0node -v

2. Signature configuration template

json5

// build-profile.json5 { "signAlg": "SHA256withECDSA", "storeFile": "${user directory}/.ohos/config/default_ohos_xxx.p12", "keyAlias": "debugKey", "profile": "${user directory}/.ohos/config/default_ohos_xxx.p7b", "compatibleSdkVersion": "5.0.0(12)" }

3. Flutter OHOS environment configuration

3.1 Install the Flutter OHOS branch

bash

# Customised branches of cloning git clone -b ohos https://gitee.com/openharmony-sig/flutter.git export FLUTTER_HOME="D:/flutter_ohos" export PATH="$PATH:$FLUTTER_HOME/bin" # Verify Installation flutter --version # The expected output contains：Channel ohos • Framework Revision xxxx

Key adaptation steps

1. Project Initialization Configuration

Step 1: Create a HarmonyOS module

bash

# In the Flutter project root directory, run flutter create --template=module --platforms=ohos .

Step 2: Configure the hybrid project

json5

// ohos/oh-package.json5 { "name": "flutter_harmony", "version": "1.0.0", "dependencies": { "@ohos/flutter_module": "file:./entry" } }

2. Renovation of entrance documents

HarmonyOS ingress ability configuration

typescript

// ohos/entry/src/main/ets/entryability/EntryAbility.ts import flutter from '@ohos/flutter_module'; export default class EntryAbility extends Ability { onCreate(want: Want) { flutter.init(this.context); flutter.run({ entry: 'lib/main.dart' }); } }

3. Key points of the Flutter project transformation

3.1 Platform Conditional Compilation

dart

// Platform judgement logic const bool kIsOHOS = bool.fromEnvironment('dart.library.ohos'); void initPlatform() { if (kIsOHOS) { // Initialisation of the Hongmeng platform initOHOSComponents(); } else { // Other platform initialisation initMobileComponents(); } }

3.2 Platform channel adaptation

dart

// Native Communication Adaptation const _channel = MethodChannel('com.example/native'); Future<void> callNativeFeature() async { if (kIsOHOS) { return _channel.invokeMethod('ohos_feature'); } return _channel.invokeMethod('android_feature'); }

3.3 Resource File Adjustments

yaml

# pubspec.yaml Adjustment example flutter: assets: - assets/images/common/ - assets/images/ohos/ # Resources earmarked for Hong Kong - assets/fonts/ohos/ # Hongmeng Font Optimisation

4. Hybrid engineering build configuration

4. Project configuration implications

4.1 Multi-platform configuration management

bash

# Project restructuring lib/ ├── common/ # Cross-platform common code ├── ohos/ # Hongmeng-specific realisation │ ├── services/ │ └── widgets/ └── android/ # Native Android Implementation

4.2 HarmonyOS module build.gradle configuration

groovy

// ohos/entry/build.gradle ohos { compileSdkVersion 5 buildTypes { release { proguardOpt { enable true rulesFiles 'proguard-rules.pro' } } } }

4.3 Plug-in Compatibility

yaml

# pubspec.yaml conditionally dependent dependencies: shared_preferences: ^2.2.1 shared_preferences_ohos: ^1.0.0 url_launcher: ^6.1.9 url_launcher_ohos: ^2.0.0 dependency_overrides: shared_preferences: ohos: shared_preferences_ohos url_launcher: ohos: url_launcher_ohos

4.4 Build Configuration Changes

groovy

// android/build.gradle Need to comment out Android specific configurations // android { // compileSdkVersion 33 // ndkVersion "25.1.8937393" // }

Fourth, build the deployment process

1. Standard build commands

bash

# debug mode hvigor assembleDebug --mode module # production environment hvigor assembleRelease --mode module

2. Device deployment requirements

projectrequestSystem versionOpenHarmony ≥4.0Device typeDevices powered by the ArkUI engineSignature verificationA debugging certificate needs to be preset

5. Best Practices

1. Recommendations for environment configuration

bash

# Configuring Huawei Mirror Sources npm config set registry https://repo.huaweicloud.com/repository/npm/

2. Example of permission adaptation

dart

Future<void> checkHarmonyPermission() async { final status = await PermissionHandlerOhos.requestPermission( Permission.ohosPermission(permissionId: 'ohos.permission.INTERNET') ); if (!status.isGranted) { throw Exception('Requires authorisation of network access'); } }

6. Test and verification

1. Test the framework configuration

json5

// oh-package.json5 "devDependencies": { "@ohos/hypium": "^1.0.6" }

2. Key verification items

• Cross-platform component rendering consistency

• System-level function calls (camera, positioning, etc.)

• Hybrid Stack Management(Flutter+HarmonyOS)

7. Description of common dependencies

Dependency typeRecommended componentsFeature descriptionBasic framework@ohos/flutter_ohosFlutter runtime environmentSystem interactionurl_launcher_ohosHarmonyOS IntentHardware accesspermission_handler_ohosPermission management adaptationBlended renderingwebview_flutter_ohosSystem WebView integration

postscript

Initial learning of Flutter and HarmonyOS NEXT hybrid development, in the hybrid development architecture, the design quality of the Platform Abstraction Layer directly affects the subsequent maintenance cost. It is recommended to establish a unified platform difference handling specification at the beginning of the project.

Original Link：https://juejin.cn/post/7481217307647836187