HarmonyOS Flutter Practice: 16-Painless Development Guide (Suitable for Newbies)

#harmonyos #flutter

Painless Development Environment

In order to reduce pain, the globally unique Flutter version is used here for development. For advanced usage, please refer to previous articles in the same series.

Hardware Preparation

One Mac, one Mate60 Pro, and two monitors.

HarmonyOS Flutter SDK developers love to use Mac, and use the same device (Arm version Mac is preferred, X86 is also OK, and the system should not be too old) without worry.

Auditors love to use the Mate60 series, and choose the same model without worry.

Two monitors, put other people's code on the left, and your own on the right, for easy reference (copy and paste).

Environment Preparation

Download DeEco

Go to the Huawei Developer Alliance website, https://developer.huawei.com/consumer/cn/download/, and click to download according to the computer model.

Download Flutter SDK

# Create directory ~/.fvm/versions
mkdir -p ~/.fvm/versions

# Clone Flutter SDK
git clone https://gitee.com/harmonycommando_flutter/flutter.git custom_3.22.0

Configure environment variables

Open ~/.bash_profile and add the following content

# 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

export PATH="~/.fvm/versions/custom_3.22.0/bin:$PATH"

After the configuration is complete, close the command line tool and reopen it to make it effective. Use the flutter doctor command to check whether there is 3.22.0-ohos.

Create a project

Use the following command to create a project

flutter create --platforms ohos .

Configure automatic signing

Use Deveco to open the project and connect the Mate60 Pro phone to the computer (required).

Open File -> Project Structure -> Signing Configs and check Automatically generate signature.

Click Apply and OK to complete the signature. You can close DevEco at this time.

Run the project

Use the Flutter run command, or click the run button in the IDE

# View the device number
futter devices

An output similar to the following appears

Found 3 connected devices:
FMR0224904009635 (mobile) • FMR0224904009635 • ohos-arm64 • Ohos OpenHarmony-5.0.1.115 (API 13)
macOS (desktop) • macos • darwin-x64 • macOS 14.6.1 23G93 darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.108