如何在macOS下启动第一个Flutter应用

Flutter介绍 - 图片来自简书App

Flutter是谷歌推出的一个基于Dart语言的跨平台开发框架,可以构建漂亮的原生应用。

Flutter特点

  • 快速开发
  • 富有表现力和灵活的UI
  • 接近原生应用性能

Flutter安装

系统要求

  • 操作系统 - macOS (64-bit)
  • 磁盘空间 - >=700MB
  • 工具
    • bash - 执行Flutter命令的终端软件
    • curl - 使用URL传输数据的命令行软件
    • git - 免费开源的分布式版本控制软件
    • mkdir - 创建目录或者文件夹的命令
    • rm - 删除目录或者文件的命令
    • unzip - 解压由zip压缩的命令
    • which - 查找并显示给定命令的绝对路径的命令

软件要求

  • Flutter SDK
  • Android toolchain
  • iOS toolchain
  • Android Studio
  • IntelliJ IDEA
  • VS Code

安装步骤

  • 下载Flutter SDK
curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.0.0-stable.zip
  • 解压文件
unzip flutter_macos_v1.0.0-stable.zip
  • 设置环境变量
$ export PATH="$PATH:`pwd`/flutter/bin"
  • 验证Flutter环境变量是否成功
    在终端执行flutter命令有如下输出则表明Flutter SDK安装成功。
SDK环境变量配置验证 - 图片来自简书App
  • 运行 flutter doctor命令
flutter doctor

执行以上命令可以诊断当前系统中的Flutter开发环境是否配置完成,如果配置成功那么会看到如下的输出。

你的Flutter开发环境是否安好 - 图片来自简书App

Doctor环境诊断解读

我们知道要完成Flutter跨平台开发,需要配置iOS开发环境、Android开发环境和Dart开发环境,针对每一项的开发环境我相信有经验的朋友都会轻松的搞定,那么我就说一下大家常用的开发环境的基本配置吧。

  • iOS开发环境
    • 集成开发环境 - Xcode(可能需要安装Command Line Tools)
    • iOS设备或者模拟器
    • CocoaPods
  • Android开发环境
    • 集成开发环境 - Android Studio 和 IntelliJ IDEA
    • Android设备或者模拟器
    • Gradle

我们从Dart语言的官网上可以看到支持Dart语言开发的工具如下:

集成开发环境或者编辑器 - 图片来自简书App

那么我们选取目前比较流行的VS Code作为Dart开发环境,此时我们只需要安装VS Code并通过扩展安装Dart语言插件即可进行Dart开发。

上图中的环境诊断中Android Studio和IntelliJ IDEA集成开发环境表示的对勾是指安装了Flutter插件,flutter doctor识别了该插件,而VSCode也是同样的道理。
对于连接到的设备也就是Connected device选项是指启动了模拟器或者通过USB连接了物理设备。

在不启动Xcode的前提下,可以使用open -a Simulator快速启动一个iOS模拟器

在这里我就赘述Android开发环境和iOS开发环境的搭建了,我相信凭借大家的智慧肯定能搞定开发环境的搭建,在这里我只就Flutter官网上提到的部署应用到iOS设备的章节说一下注意事项。

部署应用到iOS设备 - 图片来自简书App

在上述第三步通过brew安装cocoapods时,暂时通过gem install cocoapods进行安装,而不使用brew install cocoapods命令安装。

通过brew安装的cocoapods的版本比gem安装的版本低,当然我们也可以使用brew进行快速安装,其中的原因得看Flutter在构建应用时使用的cocoapods的版本,我暂时没有去看flutter命令的相关代码,因此不敢在此妄言。

Flutter创建项目并启动

上面我们说了环境搭建过程中的注意事项,接下来我们需要创建一个新项目并启动,有两种方法可以创建新项目:

  • 通过flutter命令进行创建 - 你有没有去看看flutter命令的子选项并了解其中的含义,我们要知其然知其所以然,不是么
  • 通过Android Studio或者IntelliJ IDEA创建 - 我们安装Flutter插件是干嘛的,你知道么😆

对于项目的创建我就不一一赘述了,我给大家来几张iOS模拟器和Android模拟器运行成功的截图吧,大家可以自行探索Flutter的强大功能。

iOS运行截图 - 图片来自简书App
Android运行截图 - 图片来自简书App

参考

总结

通过以上内容的梳理,我知道了Flutter开发环境是如何搭建的,也对Flutter这个跨平台框架有了一个更加直观的认识,我相信这仅仅是开始,要探索更多关于Flutter框架的信息请移步Flutter官方文档浏览更多的资源,我相信越来越多的跨平台开发框架的流行不仅仅是对原生应用开发的补充,而是颠覆了一些传统软件开发的流程,我更坚信社会的进步离不开科学技术的不断普及和发展,让我们一起迎接科学技术的更新迭代吧。

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

推荐阅读更多精彩内容

  • 原文 阿里技术 ,传送门 Flutter简介 Flutter的架构主要分成三层:Framework,Engine和...
    盖世英雄_ix4n04阅读 5,357评论 1 23
  • 本文是以在 Mac 电脑上搭建为例,其他环境请参考官方文档。 开始搭建 下载 Flutter SDK,可以选择 g...
    不知名bzm阅读 1,529评论 0 0
  • 我跟老李在一起,确实是缘分。(猿粪) 因为那时候连中间这个介绍人艺菲,我都不怎么熟悉。 那时候考教师编制,我这个人...
    小雀斑妹纸阅读 624评论 2 2
  • 艺术创作和回国的问题 未来是没有把握的,没有任何既定的可靠的道路可循,只能凭每个人的直觉和预感,勇气和信...
    _喵__阅读 530评论 0 0
  • 最近身边发生了很多事,心情总是好不起来,决定尝试一次独自治愈之旅,4天时间就选择了美丽的云南,正好去看望云南的许久...
    小泥巴教练阅读 354评论 2 2