Flutter 搭建开发环境和创建首个项目

本文是个人学习 Flutter 过程中的笔记,内容包含查阅的资料和自己实践的总结。


基本认识

Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。

Flutter的目标是使同一套代码同时运行在Android和iOS系统上,并且拥有媲美原生应用的性能,Flutter甚至提供了两套控件来适配Android和iOS(滚动效果、字体和控件图标等等),为了让App在细节处看起来更像原生应用。

Flutter开辟了一种全新的思路,从头到尾重写一套跨平台的UI框架,包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现,依赖系统的只有图形绘制相关的接口,可以在最大程度上保证不同平台、不同设备的体验一致性,逻辑处理使用支持AOT的Dart语言,执行效率也比JavaScript高得多。

Flutter同时支持Windows、Linux和macOS操作系统作为开发环境,并且在Android Studio和VS Code两个IDE上都提供了全功能的支持。Flutter所使用的Dart语言同时支持AOT和JIT运行方式,JIT模式下还有一个备受欢迎的开发利器“热刷新”(Hot Reload),即在Android Studio中编辑Dart代码后,只需要点击保存或者“Hot Reload”按钮,就可以立即更新到正在运行的设备上,不需要重新编译App,甚至不需要重启App,立即就可以看到更新后的样式。

以上内容摘自这里


系统要求

安装并运行Flutter,开发环境必须满足以下最低要求:

  • 操作系统::macOS (64-bit)
  • 磁盘空间::700 MB (不包括Xcode或Android Studio的磁盘空间)。
    安装过程中,不足会提醒,腾出空间后可继续。
  • 工具: Flutter 依赖下面这些命令行工具.
    bash, mkdir, rm, git, curl, unzip, which

安装 Flutter

1、下载安装包

  • 官网 下载 macOS 的 Flutter 的压缩包。(别在中文网下载,避免不是最新的)

2、解压缩安装包

解压缩 Flutter 到本地目录。比如,我在 /Users/xxx目录下,创建了一个development文件夹,存放 Flutter:

cd ~
#创建文件夹
mkdir development

cd development
#unzip ~/Downloads/<你刚刚下载的Flutter压缩文件>
unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip

3、设置PATH环境变量

3.1、临时添加到PATH(不建议)

添加 Flutter 工具到PATH,由于当前就在 /Users/xxx/development,直接用 pwd

#export PATH=<flutter sdk 存放路径>/flutter/bin:$PATH
export PATH=$PATH:`pwd`/flutter/bin

执行echo $PATH可以查看是否设置成功, 但是这种方式只能暂时针对当前命令行窗口设置PATH环境变量,关闭命令行窗口重新开启,echo $PATH查看,则没有之前的设置。所以不建议如此。

3.2 永久添加到PATH

  • 打开/创建$HOME/.bash_profile,由于我之前已经创建了该文件 /Users/xxx/.bash_profile,故直接编辑:
vim ~/.bash_profile
  • 添加Flutter到PATH,路径即为上面Flutter SDK 安装目录,一定要正确。
#这是我之前添加的GO的PATH,和下面不冲突
export PATH=$PATH:$GOBIN

#Flutter_SDK_Path:Flutter SDK 安装目录,如上面的/Users/xxx/development
export PATH=$PATH:<Flutter_SDK_Path>/flutter/bin
  • 使用镜像:
    由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像(不定期查阅避免失效),可以将如下环境变量也加入到用户环境变量中:
#国内用户需要设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 保存.bash_profile,并退出编辑模式,刷新当前窗口:
source ~/.bash_profile
  • 关于zsh的配置
    若终端为zsh,启动终端时,默认不会加载$HOME/.bash_profile,有如下两种方式处理,任选其一即可。
    1、 可以在$HOME/.zshrc 文件中添加 source ~/.bash_profile 指令,然后保存.zshrc并退出,刷新当前窗口 source ~/.zshrc
    2、 直接将上述关于flutter的配置,添加到$HOME/.zshrc 文件,然后保存并退出,刷新当前窗口 source ~/.zshrc

  • 查看设置结果:

echo $PATH

4、执行检查Flutter的安装

执行以下指令,检查Flutter是否需要安装其他依赖:

flutter doctor

如本人执行后,终端报错如下:

✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy

根据以上提示,执行安装。安装过程中可能会空间不足,则清除空间后继续安装。最后再次执行flutter doctor检查:

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.5 17F77, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.30.1)
[✓] Connected device (1 available)

由于本人目前只考虑iOS的支持,故先忽略Android的支持。所以以上已经满足要求。

5、 其他

官方也提供了以下 clone 的方式来安装Flutter,本人并没具体实践:

#国内用户需要设置官方提供的镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#clone
git clone -b dev https://github.com/flutter/flutter.git
#设置环境变量
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
#检查flutter
flutter doctor

配置IDE

本人选择使用的是 VS Code。当然也可以配置其他编辑器,详见官网.

1、下载 VS Code

VS Code官网 下载安装最新稳定版本。

2、安装 Flutter 和 Dart 插件

  • 启动 VS Code
  • View > Command Palette,即 查看 > 命令面板
  • 输入 install,选择 Extensions: Install Extensions,即 扩展:安装扩展
  • 输入 flutter,在列表中选中 Flutter 进行安装(会同步安装 Dart 插件)
  • 安装完毕,点击 Reload to Activate,即 重新加载

3、检查

  • View > Command Palette,即 查看 > 命令面板
  • 输入 doctor,选择 Flutter: Run Flutter Doctor
  • 查看 OUTPUT 面板查看信息,若有报错根据提示解决即完成配置。

创建第一个 Flutter 项目

  • 启动 VS Code
  • View > Command Palette,即 查看 > 命令面板
  • 输入 flutter,选择 Flutter: New Project
  • 输入项目名,点击回车确认
  • 确认项目存放的路径
  • 等待,当看到 lib/main.dart 文件,就表示创建成功。

运行 Flutter 项目

  • VS Code 窗口底部状态条,选择真机或者模拟器。
  • Debug > Start Debugging,或者直接点击 F5
  • 等待程序启动,可在 Debug Console (调试控制台)查看启动进度。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容