Flutter学习（一）——搭建开发环境（Windows）

久闻 Flutter 大名，今天终于有时间体验一下了 ٩(๑>◡<๑)۶ 

官网：https://flutter.dev/

中文官网：https://flutterchina.club/

一、下载Flutter SDK

1、下载

①官网下载：https://flutter.dev/docs/development/tools/sdk/releases#windows

②github下载：https://github.com/flutter/flutter/releases

 2、解压

将安装包zip解压到你想安装Flutter SDK的路径。

3、打开flutter命令行

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

二、下载Android Studio

下载安装就行了，注意一下sdk的路径，需要配置环境变量。

三、配置编辑器

编辑器我习惯用VS Code，在扩展商店搜索 ‘flutter’，安装Flutter插件就可以了。

四、配置环境变量

 1、镜像

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

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

2、在Path中添加flutterin的全路径，如下图：

3、配置ANDROID_HOME，设置为SDK安装目录

五、连接设备

1、真机

手机连接电脑，在开发者选项中，打开USB调试，授权计算机访问设备。

2、模拟器

这次没有使用模拟器，之前做RN用过，电脑会比较卡。

 六、创建新应用

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
4. 输入 Project 名称 (如myapp), 然后按回车键
5. 指定放置项目的位置，然后按蓝色的确定按钮
6. 等待项目创建继续，并显示main.dart文件

七、运行

1、在flutter命令行中运行 flutter doctor 命令，查看是否需要安装任何依赖项来完成安装。

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）。

2、确保在VS Code的右下角选择了目标设备

3、按 F5 键或调用Debug>Start Debugging

　　安装成功即会在手机上看到如下应用程序。

 

下面是遇到的一些问题------------------------------

问题一：

安装Android studio时出现unable to access android sdk add-on list

解决方法：

1、用记事本打开bin下面的idea.properties文件（xxx/android studio/bin/idea.properties）；

2、在idea.properties最后一行加上：

disable.android.first.run=true

3、重启电脑

问题二：

安装Android studio后，用flutter doctor检测，发现Android licenses not accepted

解决方法：

运行如下命令，然后都选择y，接受，就可以了

flutter doctor --android-licenses

问题三：

在设备上运行程序失败，如下图：

解决方法：

配置ANDROID_HOME环境变量（这里上面有讲到，但是我第一次运行时没有配置，导致报错）

 

 END。