DEV Community

Cover image for HarmonyOS Flutter Practice: 24-Hybrid Development Detailed Explanation-4-Initialize Flutter
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter Practice: 24-Hybrid Development Detailed Explanation-4-Initialize Flutter

#harmonyos #flutter

Overview

After adding the Flutter module to the host Harmony project, you need to implement page jump, message communication and other functions. This article focuses on how to initialize Flutter.

Project configuration

Add dependencies

Edit the ohos_app/oh-package.json file

  1. If you import the Flutter module through the Har package, you need to add the following content 
"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",
}
Enter fullscreen mode Exit fullscreen mode
  1. If you import the Flutter module through source code, you need to add the following content: 
"dependencies": {
"@ohos/flutter_module": "./flutter_module",
"@ohos/flutter_ohos": "./har/flutter.har"
},
Enter fullscreen mode Exit fullscreen mode

Initialize the Flutter engine

Edit ohos_app/entry/src/main/ets/entryability/EntryAbility.ts file, modify it as follows:

-import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
-import { hilog } from '@kit.PerformanceAnalysisKit';
-import { window } from '@kit.ArkUI';
+import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
+import { GeneratedPluginRegistrant } from '@ohos/flutter_module';

-const DOMAIN = 0x0000;
-
-export default class EntryAbility extends UIAbility {
- onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
- this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
- hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
- }
-
- onDestroy(): void {
- hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
- }
-
- onWindowStageCreate(windowStage: window.WindowStage): void {
- // Main window is created, set main page for this ability
- hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
-
- windowStage.loadContent('pages/Index', (err) => {
- if (err.code) {
- hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
- return;
- }
- hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
- });
- }
-
- onWindowStageDestroy(): void {
- // Main window is destroyed, release UI related resources
- hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
- }
-
- onForeground(): void {
- // Ability has brought to foreground
- hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
- }
-
- onBackground(): void {
- // Ability has back to background
- hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
+export default class EntryAbility extends FlutterAbility {
+ configureFlutterEngine(flutterEngine: FlutterEngine) {
+ super.configureFlutterEngine(flutterEngine)
+ GeneratedPluginRegistrant.registerWith(flutterEngine); 
}
}
Enter fullscreen mode Exit fullscreen mode

The final EntryAbility.ts file content is as follows:

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '@ohos/flutter_module';

export default class EntryAbility extends FlutterAbility { 
configureFlutterEngine(flutterEngine: FlutterEngine) { super.configureFlutterEngine(flutterEngine)
GeneratedPluginRegistrant.registerWith(flutterEngine);
}
}
Enter fullscreen mode Exit fullscreen mode

EntryAbility inherits from FlutterAbility, and FlutterAbility inherits from UIAbility, which adds the following features to UIAbility:

  1. Engine management
  2. Initialize Flutter engine (FlutterEngine)
  3. Handle Flutter and native capability binding through Delegate
  4. Manage window lifecycle (create/destroy)
  5. UI interaction
  6. Create FlutterView view container
  7. Handle system configuration changes (dark mode/font scaling)
  8. Implement multi-language/accessibility service adaptation
  9. Lifecycle coordination
  10. Forward native lifecycle events to the Flutter layer (onForeground/onBackground)
  11. Handle exception recovery (appRecovery.restartApp)
  12. Extension support
  13. Provide plugin management interface (addPlugin)
  14. Support hot reload configuration synchronization (onConfigurationUpdate)

Summary

This section mainly introduces how to initialize the Flutter engine and initialize the Flutter Module. In the next section, we will introduce how to jump from native to Flutter and display the interface.

References

Top comments (0)