CodeNewbie Community 🌱

Cover image for HarmonyOS Flutter in action: 11 - Use Flutter SDK 3.22.0
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter in action: 11 - Use Flutter SDK 3.22.0

SDK Installation

Refer to the instructions in the article [HarmonyOS Flutter Practice: 01 - Build a Development Environment], and first install Flutter SDK 3.22.0.

At present, HarmonyOS Flutter SDK 3.22 has not been officially released, and now you can use 'https://gitee.com/harmonycommando_flutter/flutter' for preliminary testing and verification.

Use FVM to go to directory '~/fvm/versions/' and clone the above repository.

git clone https://gitee.com/harmonycommando_flutter/flutter.git custom_3.22.0
Enter fullscreen mode Exit fullscreen mode

Next, use the 'fvm list' command to view the list of SDK versions.

┌───────────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.0 │ │ Need setup │ │ │ │ │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
│ 3.22.0 │ stable │ 3.22.0 │ 3.4.0 │ May 13, 2024 │ ● │ │
└───────────────┴─────────┴─────────────────┴──────────────┴──────────────┴────────┴───────┘
Enter fullscreen mode Exit fullscreen mode

As you can see, there are two versions of the SDK, in which the command 'fvm global 3.22.0' is used to set the official 3.22.0 as the global default version. The HarmonyOS SDK needs to be configured and installed, and we will enter the project later and perform the installation.

Project Configuration

  1. Go to the root of the project, and if the project hasn't been created yet, use the 'flutter create' command to create the project
flutter create my_app
Enter fullscreen mode Exit fullscreen mode
  1. In the current project directory, set the version of the Flutter SDK to use
fvm use custom_3.22.0
Enter fullscreen mode Exit fullscreen mode

At this time, the SDK version will be automatically installed, and if you run 'fvm list' after successful operation, you can see that the SDK is ready.

┌───────────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.0 │ │ 3.22.0-ohos │ 3.4.0 │ │ │ │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
Enter fullscreen mode Exit fullscreen mode

At the same time, after the configuration command is executed, the '.fvm' directory will be created in the project directory, and the flutter_sdk will be soft-connected to the actual custom_3.22.0 SDK directory.

Looking at the .vscode/settings.json file, you can see that a project is automatically created to configure the Flutter SDK:

"dart.flutterSdkPath": ".fvm/versions/custom_3.22.0"
Enter fullscreen mode Exit fullscreen mode

If your project uses Melos, you will need to add the following configuration at the bottom of the Melos.yaml file so that Melos can use the custom Flutter SDK

sdkPath: .fvm/versions/custom_3.22.0
Enter fullscreen mode Exit fullscreen mode
  1. If the project has been created and the HarmonyOS platform support has not been added, use the following command to add the HarmonyOS platform support:
flutter create --platforms ohos .
Enter fullscreen mode Exit fullscreen mode

where '.' represents the current directory.

The directory structure looks like this

├── README.md
├── analysis_options.yaml
├── assets
├── build
├── env
├── lib
│ ├── config
│ └── main.dart
├── melos_ohos_app.iml
├── ohos
│ ├── AppScope
│ ├── build-profile.json5
│ ├── entry
│ ├── har
│ ├── hvigor
│ ├── hvigorfile.ts
│ ├── local.properties
│ ├── oh-package-lock.json5
│ ├── oh-package.json5
│ └── oh_modules
├── pubspec.lock
├── pubspec.yaml
└── pubspec_overrides.yaml
Enter fullscreen mode Exit fullscreen mode

After the creation command is successfully executed, the 'ohos' directory will appear in the project, which stores the relevant code of the HarmonyOS platform.

Signature

  1. Before running the project, sign the project first, otherwise there will be such an error during the run
Please open the ohos project in DevEco Studio and configure the debugging signature (File -> Project Structure -> Signing Configs and check Automatically generate signature)
Enter fullscreen mode Exit fullscreen mode
  1. Use DevEco to open the 'ohos' directory above, note that it is not the project directory, but the ohos directory under the project, and then open 'File -> Project Structure -> Signing Configs' according to the prompts, and click Auto-Sign.

  2. After the signature is successful, the file 'ohos/build-profile.json5' will be automatically updated, and the corresponding signature configuration information will appear in the field 'signingConfigs'.

Run

To run the Flutter project, use 'fvm flutter run' in the root directory of the project or click the Run button in the IDE

References

Top comments (0)