win10下Flutter环境搭建

太过爱你忘了你带给我的痛 2021-09-28 15:40 548阅读 0赞

# Flutter环境搭建 #

### 一、Flutter简介 ###

来自flutter中文网的介绍：

> Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。  
> Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

### 二、相关环境配置 ###

##### 1、flutter配置 #####

1.  下载flutter文件  
    下载地址：  
    [https://storage.googleapis.com/flutter\_infra/releases/stable/windows/flutter\_windows\_v1.2.1-stable.zip][https_storage.googleapis.com_flutter_infra_releases_stable_windows_flutter_windows_v1.2.1-stable.zip]
2.  配置flutter环境变量  
    将文件解压到相应的目录，并设置环境变量，如图：  
    Path下添加存放的文件夹+`/flutter/bin`，以下是添加相关https请求：

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

![设置基本URL][URL]  
![设置公共URL][URL 1]

##### 2、android配置 #####

1.  下载地址：  
    [http://www.android-studio.org/][http_www.android-studio.org]
2.  安装并进行配置  
    安装的的时候可以指定相应的位置，等待完成启动，启动的时候会提示一个Http弹窗提示，让我们设置代理，解决方案：编辑bin文件夹下的idea.properties文件，在末尾添加`disable.android.first.run=true`；接着配置一下sdk的环境变量：

> 1）新建一个环境变量名称为ANDROID\_HOME，变量值为当前安装SDK的目录。  
> 2）把%ANDROID\_HOME%\\platform-tools;%ANDROID\_HOME%\\tools添加到Path环境变量中。

如图：  
![环境变量][20190523232901893.png]  
进入cmd，进行查看是否配置成功：输入`adb`  
![adb配置信息][adb]  
3. 安装flutter相关插件  
通过Plugins搜索flutter进行插件安装。

> 安装插件的时候可能会出现问题，等待时间过长等，这时候可以通过`File->Settings->Apparence & Behavior->System Settings->Updates->use secure connnection 勾去掉`该设置进行获取插件。

##### 3、vs code配置 #####

如果需要使用vs Code进行开发，只需要安装flutter插件就可以。

### 三、检查环境配置 ###

输入`flutter doctor`，此时可能会提示一串警告，如图：此时只要输入`flutter doctor --android-licenses`，根据提示一路“y”执行即可。  
![警告][20190523233212793.png]  
最后的环境结果：因为本地安装了IDEA和Android studio，此时只要有一个IDE安装了flutter插件既可，这个可以忽略。  
![结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70]

### 四、第一个程序 ###

这边使用的是VS code 进行创建项目。输入F1，进行new 一个flutter project，并输入项目名称，如图：  
![新建][20190523233554850.png]  
新建完成后会默认有以下层级文件，找到 lib 下的`main.dart`执行。如图：  
![执行][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 1]  
等待一段时间后，会在虚拟机上安装apk文件，此时第一默认app就完成了。  
![第一个程序][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 2]

[https_storage.googleapis.com_flutter_infra_releases_stable_windows_flutter_windows_v1.2.1-stable.zip]: https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.2.1-stable.zip
[URL]: /images/20210923/a390e6558c3d4377a34e570ab2abbbfd.png
[URL 1]: /images/20210923/54a9449645d14a1d86599e170ad5474c.png
[http_www.android-studio.org]: http://www.android-studio.org/
[20190523232901893.png]: /images/20210923/edd1884ed8ea4e0dbec53b413ec9c5c2.png
[adb]: /images/20210923/eff31b8899194167b73dfad8e484f0b7.png
[20190523233212793.png]: /images/20210923/a2bdcc950be94911adc3cdaf37d236c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70]: /images/20210923/94dcd7093c7a46e1a160889806b13224.png
[20190523233554850.png]: /images/20210923/18fe7952b75848fb9b399038c2cbada2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 1]: /images/20210923/83b40d972fc547f58058164768d198b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 2]: /images/20210923/05c3dea81a004fdd855f52c0f789949f.png