第二章:搭建Flutter环境,体验Flutter的Hello

作者: Leesim | 来源:发表于2018-11-07 17:08 被阅读220次

在Windows上搭建Flutter开发环境，并在模拟器上看到m
Flutter.1.基础搭建
第二章:搭建Flutter环境,体验Flutter的Hello
Flutter开发准备
Flutter环境搭建
android flutter 文章汇总
iOS中RN与Flutter混合开发
Flutter开发环境搭建
sharesdk flutter集成从零指南
开发之路六——Flutter环境Win10搭建

在开始一类项目的开发前一定是要解决好IDE和开发环境问题。由于Flutter作为一个跨平台的技术，所以你如果想要全面调试Flutter项目，你需要iOS和Android两端的开发工具，Xcode和Android。这里仅介绍MacOS下的安装方案，其他平台的环境方案会在最后的链接内可以去官网查看。

建议下面的步骤全部在科学上网环境下进行，不然可能会在某些步骤卡住

使用镜像

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

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

获取Flutter SDK

1.去flutter官网下载其最新可用的安装包,跳转到官网下载。
（1）这一步注意科学上网
（2）这里面有一个beta版本有一个dev版本，因为Flutter还在测试阶段，所以现在使用的也是beta测试版本，建议使用beta版本相当于目前的正式版，dev会提前几个版本放出相当于测试版本。
2.解压安装包到你想安装的目录，如：

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

3.添加flutter相关工具到path中：

export PATH=`pwd`/flutter/bin:$PATH

此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中请参考下面更新环境变量部分。

运行 flutter doctor

在命令行内执行下方命令，能检查到当前环境缺少的内容，可以在解决完部分环境问题之后，再次输入进行验证。

flutter doctor

执行完毕之后会有类似的报错出现（还会有iOS相关的报错，大部分是模拟器相关的）：

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

可能会有比较多的报错，不过不要担心，每个报错后面都会有建议执行的命令，按照步骤执行就可以了。因为笔者是一个iOS开发，所以Android相关的大部分都有问题，首先问题就是IDE的下载问题。Xcode可以直接在AppStore内下载更新，但是Android的工具Android Studio要去官方网站上直接下载然后安装，跳转到官网下载。
下载完毕之后按照flutter doctor给的后续提示就可以进行安装环境的搭建了。

整体的过程都非常简单，就是这一步需要你针对不通的错误进行处理一下就可以。当你看到所有的类型前面都显示[✓]，那么就代表你已经安装成功了。

其他平台的安装方法

大致操作可能也都类似，不过Windows和Linux可能还是有一些不通的差别，可以到官网进行查看安装方法，去官网了解其他平台的安装方法。

如果你在安装过程中遇到任何问题

同时如果你在安装过程中遇到了需要特殊处理的地方，可以参考Flutter中文网的安装细节，因为我在安装过程的过程中感觉官网中的安装方式过于繁琐进行了一些剔除，不过如果你还需要详细的某些细节的设置，可以参考上面的官网链接进行查看不通平台的问题。或者在下方留言，我会尽力帮你解决。

开发工具IDE

建议直接使用Android Studio,因为毕竟是自己的，在开发效率相同的情况下，还是亲儿子比较好，更新起来兼容性也好很多。而且上面的开发环境准备过程中已经下载过了，所以是十分方便的。对Android开发来说也是很友好的。
不过要记住安装两个插件：

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

1.启动Android Studio.
2.打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
3.选择 Browse repositories…, 选择 Flutter 插件并点击 install.
4.重启Android Studio后插件生效.一定记得重启重启重启，不然你会找很久为啥没生效。不要问我怎么知道的（因为我当时就没重启。。。。僵住）

创建第一个Flutter项目

1.选择 File>New Flutter Project
2.选择 Flutter application 作为 project 类型, 然后点击 Next
3.输入项目名称 (如 myapp), 然后点击 Next
4.点击 Finish
5.等待Android Studio安装SDK并创建项目.

让我惊喜的热重载

虽然Flutter的release版本不支持热更新，但是Flutter的编译版本是可以进行热重载的，这个是让我很惊喜的点，你可以在调试到一半的时候，随意更改一些代码，然后进行热重载，系统会保留刚才的操作，只修改你更改的部分，然后呈现到你的测试机或者模拟器上，这个确实是大大提升了调试的效率，你不必在一个很长的流程的终端修改一个地方，然后重新开始一遍这个流程了。