最全面的Flutter开发环境搭建

2019-11-08  本文已影响0人  CodingSnail

前言

Flutter由于跨平台、支持快速开发、富有表现力和灵活的UI、高性能,测试版本一发步就备受关注。从2018年12月正式版本发布以来,在不到一年的时间里,在GitHub上的star就已经超过了78700,与已经发布4年多的React Native的差距非常小。在今年的移动者开发大会上,美团、阿里、腾讯都分享了其在Flutter上的实践。

学习任何一门语言,都从搭建环境开始,本文主要介绍Flutter开发环境的搭建过程以及开发工具的介绍,在后面会通过一个示例讲解如何运行。

准备工作

Flutter下载

官网下载Flutter SDK压缩包

官方地址:https://flutter.dev/docs/get-started/install,选择电脑系统后,机会跳转到下载界面,选择最新的稳定版本即可。(实测下载速度很快)

image.png

通过git下载,按照官方的建议,选择beta分支

git clone -b beta git@github.com:flutter/flutter.git

配置环境变量

把下载的flutter_macos_v1.9.1+hotfix.6-stable.zip解压,解压后会有flutter的文件夹,打开可以看到flutter目录结构如下:


image.png

接下来,我们需要配置镜像站点的环境变量,Mac系统可以通过终端去配置,命令如下:

vim ~/.bash_profile

在我们的环境里面增加两行:

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

然后点击ESC键,shift+冒号,然后wq保存退出。这个时候flutter的环境已经配置好了,为了能够在其它目录也能够运行flutter的命令,需要将flutter的路径添加到全局变量中,需要在~/.bash_profile里面添加flutter的路径:

#路径需要替换成电脑flutter文件夹的路径,查看文件夹可以通过
#pwd
#/Users/CodingSnail/Documents/workspace/flutter
export PATH=$PATH:/Users/CodingSnail/Documents/workspace/flutter/bin

然后,我们可以通过flutter_doctor命令来执行flutter的诊断,查看当前的环境是否满足flutter程序运行的要求,结果如下图所示:


image.png

从诊断信息可以看出来:

flutter doctor --android-licenses

修复完以后结果如下:


image.png

在安装的过程中会提示输入Y/N,全部输入Y就可以,修复完如下所示:


image.png

如何运行Flutter程序

image.png

1.在工程目录下面,通过命令行flutter_run即可


image.png

2.通过IDE来运行程序,目前支持的有Android Studio、XCode、Visual Studio Code、IntelliJ,通过IDE工具打开项目,点击run就可以。

如何开发Flutter程序

使用Android Studio来开发和调试Flutter程序,首先需要安装如下两个插件:

启动 Android Studio,打开菜单项 Preferences > Plugins,搜索 Flutter 插件并点击 install 进行安装。安装完毕后重启 Android Studio,Flutter 插件就生效了,Dart安装方式一样。


image.png

用 Android Studio 打开flutter目录下面的example文件夹,选择 flutter_view 工程(Open an existing Android Studio Project),然后定位到工具栏:

在 Target selector 中,我们可以选择一个运行该应用的设备。如果没有列出可用设备,你可以采用下面的两种方式:参考我在前面讲到的方法,也就是打开 AVD Manager 并创建一台 Android 模拟器;或是通过 open -a Simulator 命令,在不同的 iOS 模拟器之间进行切换。直接插入 Android 或 iOS 真机。
hello_world 工程稍微有点特殊,因为它提供了两个 Dart 启动入口:一个英文版的 hello world-main.dart,和一个阿拉伯语版的 hello world-arabic.dart。因此,我们可以在 Config selector 中进行启动入口的选择,也可以直接使用默认的 main.dart。在工具栏中点击 Run 图标,稍等 10 秒钟左右,就可以在模拟器或真机上看到启动的应用程序了。运行结果如下所示:


image.png
上一篇下一篇

猜你喜欢

热点阅读