送给Flutter初学者:迈出第一步，Windows Flutter开发环境的搭建

一时失言乱红尘 2022-12-23 09:45 103阅读 0赞

很多初学者，因为在搭建开发环境之初遇到很多各式各样的问题，就动摇了继续深入学习的决心，当然这个只是对于心浮气躁的同学而言，对于比较有毅力，能吃苦的人同学来说，这些问题都不算问题啦。

话不多说，直接开整。

# **一、 下载安装Flutter SDK** #

针对下载这个SDK，我需要说明一点，下载途径有两种，一种是直接去官网下载，这种情况要么是下载很慢，老牛拉破车你懂的，要么就是直接被墙了，所以如果从官网下载不行的话，

那么建议去Github下载。

## 1.1、下载SDK ##

### 1.1.1、官网下载 ###

[https://flutter.dev/docs/development/tools/sdk/releases][https_flutter.dev_docs_development_tools_sdk_releases]

地址打开之后，下拉找到【Stable channel (Windows)】，就能看到Select from the following scrollable list:

选择一个最新的版本SDK即可。

### 1.1.2、Github仓库下载 ###

[https://github.com/flutter/flutter/releases][https_github.com_flutter_flutter_releases]

同样的，找到想下载的版本，直接下载即可。

## 1.2、解压安装 ##

将安装包zip解压到你想安装Flutter SDK的路径（如：`d:\flutter`；注意，**不要**将flutter安装到需要一些高权限的路径如`C:\Program Files\`）。

# 二、配置环境变量 #

## 2.1、将Flutter SDK的bin目录添加到"Path"环境变量中 ##

具体操作如下:

【我的电脑】----右键---->【属性】---->【高级系统设置】----->【环境变量】---->在系统变量或者用户变量中找到"Path"属性，如果没有创建一个"Path"属性

*  如果该条目存在, 追加 d:\\`flutter\bin`的全路径，使用 `;` 作为分隔符。
 *  如果条目不存在, 创建一个新用户变量 `Path` ，然后将 d:\\`flutter\bin`的全路径作为它的值。

## 2.2、使用镜像 ##

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

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

一样的操作，【我的电脑】----右键---->【属性】---->【高级系统设置】----->【环境变量】---->在用户变量或者系统变量中创建一个名为"PUB\_HOSTED\_URL"的变量，值为"[https://pub.flutter-io.cn][https_pub.flutter-io.cn]";

然后在创建一个名为"FLUTTER\_STORAGE\_BASE\_URL"的变量，然后值"[https://storage.flutter-io.cn][https_storage.flutter-io.cn]"。

然后点击确定，保存修改即可。

# 三、安装AndrodStudio #

这里就不不赘述AndroidStudio的下载安装过程了。

# 四、下载Android SDK #

这里就不不赘述AndroidSDK的下载和安装过程了。

# 五、将Android SDK 路径配置到系统环境变量中 #

【我的电脑】----右键---->【属性】---->【高级系统设置】----->【环境变量】---->在系统变量或用户变量中，增加"ANDROID\_HOME"环境变量就行了，这个变量的值

那就是SDK的安装目录。

比如我的:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 1][]

# 六、AnroidStudio 安装Flutter和Dart插件 #

需要安装两个插件:

*  `Flutter`插件： 支持Flutter开发工作流 (运行、调试、热重载等)。
 *  `Dart`插件： 提供代码分析 (输入代码时进行验证、代码补全等)。

具体操作方法如下:

点击AndroidStudio左上角的【File】--->【Settings】---->【Plugins】，如下图所示:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 2][]

直接选择\[Marketplace\]，然后在输入框中搜索Dart，在搜索出来的结果中，选择安装即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 3][]

然后在搜索安装Flutter，同样搜索到结果后，点击安装即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 4][]

以上步骤都做好之后，最好重启一下电脑。

# 七、检验Flutter的开发环境是否正常 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 5][]

在弹出的PowerShell窗口中输入命令"flutter doctor"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 6][]

当出现出现一路绿对勾的话，表明你的安装没有问题了，可以开始开发flutter项目了。

然后如果你忽略了一些步骤没有设置，比如没有将android sdk没有添加到环境变量中，就会出现如下异常。

**X**Unable to locate Android SDK  
Install Android Studio from: [https://developer.android.com/studio/index.html][https_developer.android.com_studio_index.html]  
On first launch it will assist you in installing the Android SDK components.  
(or visit [https://flutter.io/setup/\#android-setup][https_flutter.io_setup_android-setup] for detailed instructions).  
If Android SDK has been installed to a custom location, set $ANDROID\_HOME to that location.

这个时候你就需要将前面提到的第五步，设置Android SDK环境变量。

另外如果你没有安装AndroidStudio或者没有给AndroidStudio安装Dart和Flutter插件，可能会报没有安装Dart和Flutter插件的错误。

这个时候你就要去androidstudio安装dart和flutter插件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 7][]

各位看官，强烈推荐CSDN VIP会员，CSDN免费下载、课程+书免费学，快来看看！[https://marketing.csdn.net/poster/112?utm\_source=1538247462&spm=1000.2116.3001.4180][https_marketing.csdn.net_poster_112_utm_source_1538247462_spm_1000.2116.3001.4180]

[https_flutter.dev_docs_development_tools_sdk_releases]: https://flutter.dev/docs/development/tools/sdk/releases
[https_github.com_flutter_flutter_releases]: https://github.com/flutter/flutter/releases
[https_pub.flutter-io.cn]: https://pub.flutter-io.cn
[https_storage.flutter-io.cn]: https://storage.flutter-io.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70]: /images/20221120/5f000e9091dc4e08a33c2484816868e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221120/0391d37e30d34705ac29d156a1c55af6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221120/49fac884ce2e452fb3be281c81056a6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 3]: /images/20221120/ba9236b672cd43e881a7610fd6eddcf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 4]: /images/20221120/03d7412064cc451d9c31261fbdda8577.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 5]: /images/20221120/8837f829a57c48bcac04d398041f7235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 6]: /images/20221120/7786f0bac7344ac0af06801e0730b547.png
[https_developer.android.com_studio_index.html]: https://developer.android.com/studio/index.html
[https_flutter.io_setup_android-setup]: https://flutter.io/setup/#android-setup
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YTYzMTE1MDg3Mw_size_16_color_FFFFFF_t_70 7]: /images/20221120/a7bd17c646984c2290875b47c69dd98c.png
[https_marketing.csdn.net_poster_112_utm_source_1538247462_spm_1000.2116.3001.4180]: https://marketing.csdn.net/poster/112?utm_source=1538247462&spm=1000.2116.3001.4180