DEV Community

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

Posted on

HarmonyOS Flutter Practice: 11-Use Flutter SDK 3.22.0

#harmonyos #flutter

Use Flutter SDK 3.22.0

SDK Installation

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

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

Use FVM to enter the 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 SDK version list.

┌─────────────────────────┬───────────────────────────────┬────────────┬────────┬─────┐
│ 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 in the SDK, and the command fvm global 3.22.0 is used to set the official 3.22.0 as the global default version. The Harmony SDK needs to be configured and installed. We will enter the project later and perform the installation.

Project Configuration

  1. Enter the project root directory. If the project has not 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 Flutter SDK version to be used 
fvm use custom_3.22.0
Enter fullscreen mode Exit fullscreen mode

The sdk version will be automatically installed at this time. If you run fvm list again after the operation is successful, 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, a .fvm directory will be created in the project directory, in which flutter_sdk will be soft-linked to the actual custom_3.22.0 SDK directory.

Check the .vscode/settings.json file and you will find that a project for configuring the flutter sdk is automatically created:

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

If the project uses melos, you 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 Harmony platform support has not been added, use the following command to add the Harmony platform support. 
flutter create --platforms ohos .
Enter fullscreen mode Exit fullscreen mode

Where, . represents the current directory.

The directory structure is similar to the following

├── 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 contains the relevant code of the Harmony platform.

Signature

  1. Before running the project, sign the project first, otherwise the following error will occur during the operation 
Please configure the debug signature after opening the ohos project through DevEco Studio (File -> Project Structure -> Signing Configs, 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 Harmony directory under the project. Then open File -> Project Structure -> Signing Configs in sequence according to the prompts, and click Automatic Signature.

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

Run

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

References

Top comments (0)