Flutter - windows 环境安装与配置

青旅半醒 2023-10-18 11:10 9阅读 0赞

#### 环境安装 ####

本文基于windows 10 x64，大陆网络环境，Android Studio 3.2.1

##### 1.获取Flutter SDK #####

去flutter官网下载其最新可用的安装包，[点击下载][Link 1]

> 注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去[Flutter github][] 上 clone

git clone git@github.com:flutter/flutter.git

##### 2.解压Flutter SDK #####

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

##### 3.修改Flutter联网IP地址 #####

由于一些flutter命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，我们需要修改Flutter联网IP地址。

新增环境变量`FLUTTER_STORAGE_BASE_URL`，值为`https://storage.flutter-io.cn`  
![在这里插入图片描述][20181112155046526.png]

新增环境变量`PUB_HOSTED_URL`，值为`https://pub.flutter-io.cn`  
![在这里插入图片描述][20181112155206271.png]

##### 4.添加Flutter到Path变量中 #####

在Path变量中添加 `C:\src\flutter\bin` (如果没有Path目录，先新建)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70]

##### 5.运行flutter\_console.bat #####

在Flutter安装目录的flutter文件下找到flutter\_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

##### 6.运行flutter doctor #####

打开Cmd并运行一下命令来查看是否需要安装任何依赖项来完成安装。

flutter doctor

该命令检查环境并在终端窗口中显示报告。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 1]

##### 7.配置Android Studio #####

本文中Android Studio版本为3.2.1，我们选择`File->Settings->Plugins->Browse repositories`

搜索Flutter，安装并重启Android Studio  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 2]

##### 8.新建Flutter程序 #####

点击 `Fule->New->New Flutter Project` 新建一个Flutter项目，然后点击运行 (程序可能运行报错，我这边重启了Windows，再运行即可)，可以看到运行效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 3]

##### 9.体验热重载 #####

Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语:如果是一个web开发者，那么可以认为这和webpack的热重载是一样的）。简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。

比如修改某个字符串，然后点击闪电⚡️图标按钮，手机App不会关闭再重启，而是可以立刻在手机上显示修改后的界面。

##### 其他 #####

> 参考  
> [Flutter中文网][Flutter]  
> [https://www.jianshu.com/p/9aaabc60d8af][https_www.jianshu.com_p_9aaabc60d8af]

[Link 1]: https://flutter.io/sdk-archive/#windows
[Flutter github]: https://github.com/flutter/flutter
[20181112155046526.png]: https://img-blog.csdnimg.cn/20181112155046526.png
[20181112155206271.png]: https://img-blog.csdnimg.cn/20181112155206271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181112155647717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181112160328147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181112160645520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181112161303550.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[Flutter]: https://flutterchina.club/
[https_www.jianshu.com_p_9aaabc60d8af]: https://www.jianshu.com/p/9aaabc60d8af