在前面的文章中,我们初步了解了Flutter。本文将介绍Flutter的安装过程和开发工具,为了大家能更好地理解Flutter,本文还找了一个小例子。
Flutter 安装指南
关于Flutter的安装,参考官方文档中的步骤即可。本文以macOS为例,介绍Flutter在macOS上的安装细节。
官方文档地址:https://flutter.io/get-started/install/
首先,下载Flutter的源码,按照官方建议,我们选择beta分支,如下所示:
代码下载后,目录结构如下:
接着,为了方便后续使用,需要将项目根目录下bin路径加入环境变量PATH中,打开~/.bash_profile文件,修改环境变量即可,如下:
务必注意:如果你不能科学上网,那么在继续下面的步骤之前,需要做一些额外的事情。声明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL两个环境变量,在当前shell窗口执行如下两行命令即可,此举是为了让Flutter在安装过程中使用国内的镜像。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
然后,我们就可以通过命令来执行Flutter的安装程序了,经过一段时间的下载和安装,Flutter会输出安装结果:
从上面的诊断信息可以看出如下关键信息:
Flutter的版本和渠道
Flutter运行所需的Android工具链 OK
Flutter运行所需的iOS工具链 不OK
Android Studio和IntelliJ都安装了,还有一个已连接的手机
如果大家想完善iOS工具链,那么就按照✗号的提示安装相应工具即可。对于我来说,我本机的xcode版本太低,我需要升级xcode并安装一堆工具,我就懒得操作了,大家根据需要来吧。
如何运行Flutter程序
运行Flutter程序有两种方式。
第一种方式,这里假设有个Flutter程序,它的目录名为FlutterDemo,那么我们只需要在FlutterDemo目录下执行即可,当然必须通过USB连接设备才可以,这里可以选择iOS和Android手机,当然也可以选用模拟器。
第二种运行方式就是通过IDE来运行程序,比如AndroidStudio和IntelliJ的按钮。
如何开发Flutter程序
Flutter可以使用如下三个IDE来开发程序
Android Studio
IntelliJ
Visual Studio Code
但是很奇怪,看来Google并没有打算支持xcode,这或许对iOS用户不太友好。
对于Android同学来说,肯定是选择Android Studio或者IntelliJ来开发程序了。本文选择IntelliJ做演示,其实Android Studio和IntelliJ很类似。
为了使用IntelliJ来开发和调试Flutter程序,首先需要安装如下两个插件:
Flutter插件:提供程序的运行、调试和热重载等功能
Dart:提供Dart语言的支持
安装方式为:选择Preferences中的Plugins选项,然后搜索Flutter安装即可,安装Flutter插件会自动安装Dart插件,如下:
安装完成后,重启IntelliJ,就可以通过IntelliJ来新建和开发程序了。
例子展示
为了让大家更加直观地了解Flutter的运行效果,本文找了一个官方demo并在IntelliJ中打开并运行,这个例子的路径位于flutter/examples/flutter_gallery目录下,使用IntelliJ打开后如下所示:
可以看到,在连接设备那栏有三个选项,分别是Android手机、iOS模拟器和Android模拟器,这意味着:同一套代码,可以在不同的设备中运行。
在Android手机中的运行效果如下:
长按识别下方的二维码关注我,接收更多技术推送
领取专属 10元无门槛券
私享最新 技术干货