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

在开始一类项目的开发前一定是要解决好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的编译版本是可以进行热重载的,这个是让我很惊喜的点,你可以在调试到一半的时候,随意更改一些代码,然后进行热重载,系统会保留刚才的操作,只修改你更改的部分,然后呈现到你的测试机或者模拟器上,这个确实是大大提升了调试的效率,你不必在一个很长的流程的终端修改一个地方,然后重新开始一遍这个流程了。

你可能会用到的各种资源文章

1.Flutter中文网
2.为什么说flutter是未来移动技术的发展趋势
3.Flutter-learning GitHub学习资源聚合
4.闲鱼App大规模引入Flutter的原因是什么?
5.Flutter社区中文资源
6.头条 Flutter iOS 混合工程实践
7.Flutter 原理简解
8.简单易懂的Dart
9.一个很棒的Flutter学习资源列表
10.解析:面向未来的操作系统,谷歌 Fuchsia究竟会是什么样子的?

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

推荐阅读更多精彩内容