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

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",
  }

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':

Engine management
Initialize the Flutter Engine
Handle Flutter binding with native abilities via Delegate
Manage window lifecycle (create/destroy)
UI interaction
Create a FlutterView view container
Handle system configuration changes (dark mode/font scaling)
Achieve multilingual/accessibility adaptation
Life cycle coordination
Forward native lifecycle events to the Flutter layer (onForeground/onBackground)
Handle exception recovery (appRecovery.restartApp)
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.