# HarmonyOS Flutter Practice: 01 - Build a development environment

## Preparation

1\. Install [the DevEco Studio NEXT IDE](https://developer.huawei.com/consumer/cn/deveco-studio/), note that the version should be Next, and the latest version 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

```plaintext
# 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
```

## Windows installation

### Configure user variables

```plaintext
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
```

### Configure environment variables

Edit the PATH and add the following paths

```plaintext
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
```

## Manage multiple Flutter versions

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

1. Install [the FVM](https://fvm.app/)
    
2. Use the official Flutter version of FVM
    

```plaintext
fvm install 3.22.0
```

3. To install the custom HarmonyOS version, go to the fvm/version directory, which is usually located in the user directory, such as , Copy the repository and rename it to `~/fvm/versions/3.22.0custom_x.y.z`
    

```plaintext
git clone -b dev https://gitee.com/openharmony-sig/flutter_flutter.git custom_3.7.12
```

4. Use a separate version of the Flutter SDK in your project, executing it in your project directory:
    

```plaintext
fvm use custom_3.7.12
```

## frequently asked questions

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

Execute the following command:

```plaintext
git config --global --add safe.directory '*'
```

## Case

* [Webview integration](./samples/webview/README.md)
    

## Resources

* [Flutter Chinese documentation](https://docs.flutter.cn/)
    
* [Harmonyos Next development documentation](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-dev-guide-V5)