DEV Community

Cover image for HarmonyOS Flutter Hands-on: 01-Building the development environment
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter Hands-on: 01-Building the development environment

#harmonyos #flutter

Preparation

  1. Install DevEco Studio NEXT IDE, note that the version should be Next, the latest is Beta3

  2. Install Git, if you want to adapt to Android at the same time, you need to install Android Studio; if you want to adapt to iOS, you need to install Xcode

Mac Installation (Recommended)

Environment Variable Configuration

# Flutter Mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# HarmonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin
export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin
Enter fullscreen mode Exit fullscreen mode

Windows installation

Configure user variables 

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

PUB_HOSTED_URL=https://pub.flutter-io.cn

DEVECO_SDK_HOME=C:\Program Files\Huawei\DevEco Studio\sdk

JAVA_HOME=C:\Program Files\Huawei\DevEco Studio\jbr
Enter fullscreen mode Exit fullscreen mode

Configure environment variables

Edit PATH and add the following path

C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin

C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin

C:\Program Files\Huawei\DevEco Studio\tools\node
Enter fullscreen mode Exit fullscreen mode

Manage multiple Flutter versions

If you need to use multiple Flutter versions in project development, you can consider using fvm

  1. Install FVM

  2. Use the official flutter version of fvm

fvm install 3.22.0
Enter fullscreen mode Exit fullscreen mode
  1. Install a custom Harmony version and enter the fvm/version directory, which is usually located in the user directory, such as ~/fvm/versions/3.22.0, Copy the repository and rename it to custom_x.y.z 
git clone -b dev https://gitee.com/openharmony-sig/flutter_flutter.git custom_3.7.12
Enter fullscreen mode Exit fullscreen mode
  1. Use a separate flutter sdk version in the project, execute in the project directory: 
fvm use custom_3.7.12
Enter fullscreen mode Exit fullscreen mode

Common Problems

  1. Running flutter doctor shows Error: Unable to find git in your PATH.

Execute the following command

git config --global --add safe.directory '*'
Enter fullscreen mode Exit fullscreen mode

Cases

Flutter Harmony Exchange Group

[flutter Harmony Technology Exchange Group]

Currently Flutter HarmonyOS has been successfully implemented, but there are still some potential pitfalls that need to be solved and handled. Welcome to share and communicate with us

Please scan the code to add the assistant to join the group:
Remarks: HarmonyOS Flutter
wx: zacksleo

References

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.