HarmonyOS Flutter in action: 24 - Hybrid Development Details - 4 - Initialize Flutter

Overview

After adding the Flutter module to the host HarmonyOS project, you need to implement functions such as page redirection and message communication, and this article focuses on how to initialize Flutter.

Project Configuration

Add dependencies

Edit ohos_app/oh-package.json files

1. If you introduce the Flutter module through the Har package, you need to add the following contents

  "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. If you import the Flutter module through source code, you need to add the following:

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

Flutter engine initialization

Edit the 'ohos_app/entry/src/main/ets/entryability/EntryAbility.ts' file 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);
   }
}

The final EntryAbility.ts file reads 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);
  }
}

'EntryAbility' inherits from 'FlutterAbility', which in turn inherits from 'UIAbility', which adds the following functionality to 'UIAbility':

1. Engine management

• Initialize the Flutter Engine

• Handle Flutter binding with native abilities via Delegate

• Manage window lifecycle (create/destroy)

2. UI interaction

• Create a FlutterView view container

• Handle system configuration changes (dark mode/font scaling)

• Achieve multilingual/accessibility adaptation

3. Life cycle coordination

• Forward native lifecycle events to the Flutter layer (onForeground/onBackground)

• Handle exception recovery (appRecovery.restartApp)

4. Extended Support

• AddPlugin

• Hot reload configuration synchronization (onConfigurationUpdate)

Summary

This section describes how to initialize the Flutter engine, and how to initialize the Flutter Module. In the next section, we'll show you how to make the jump from native to Flutter and show you the interface.

References

• [How to use the hybrid development module] (https://gitcode.com/openharmony-sig/flutter_samples/blob/br_3.7.12-ohos-1.1.0/ohos/docs/04_development/ how to use the hybrid development module.md)

• [How to add a jump FlutterEntry using hybrid development] (https://gitcode.com/openharmony-sig/flutter_samples/blob/br_3.7.12-ohos-1.1.0/ohos/docs/04_development/ how to add a jump FlutterEntry.md using hybrid development)