手拉手带你极速构建漂亮的跨平台(iOS/Android)移动应用 ✿ 环境搭建

Flutter

上篇文章带大家认识了 Flutter ,想必大家已迫不及待的想练练手,所以要行动起来,现在这篇文章就带您搭建一个 Flutter 运行及开发环境。

文章详情可查阅我的博客 https://h.lishaoy.net ,欢迎大家访问。

安装 Flutter SDK

想要在本地电脑上运行 Flutter ,需要安装 Flutter SDK 才可以运行, SDK 里面有一些用于创建、构建、测试和编译应用程序的命令行工具等,这些在开发的时候会用到。

首先,我们有 2 种方法获取 SDK

git clone -b master https://github.com/flutter/flutter.git

其次,把下载下来的 Flutter SDK 解压,放到系统的某个目录,比如我是放到: /Applications/flutter ,如图:

Flutter SDK

配置环境变量

配置环境变量的目的是为了让 Flutter SDK 命令行工具在全局范围都起作用,以便开发使用。

首先,您可以用编辑器打开主目录下的 .bash_profile,或者用 vi 命令编辑,我习惯用 vi 命令,如下

vi $HOME/.bash_profile

新增以下配置

export PATH=$PATH:/Applications/flutter/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Tips:
第一行 export PATH=$PATH:/Applications/flutter/bin 中的 /Applications/flutter/bin 就是刚才下载的 Flutter SDK 解压后放在本地电脑的目录,您要根据自己操作更改为自己电脑对应的目录。
第二、三行为解决国内下载或更新资源慢的国内镜像,配置这个下载或更新资源会快一些。

再执行 source $HOME/.bash_profile 命令刷新当前命令行窗口,或者关掉当前命令行窗口重新打开,效果一样

source $HOME/.bash_profile

再执行 flutter --help,来测试环境变量是否配置成功,如图:

flutter help

Tips: 如果你使用的是 zsh,需要在 ~/.zshrc 文件中添加:source ~/.bash_profile ,否则 flutter 命令将无法运行。

配置 iOS 开发环境

想用 Flutter 为 iOS 平台开发应用,需要安装 Xcode,我们可以去苹果应用商店下载。

安装好 Xcode 后,你需要打开一次 Xcode 同意许可协议(会提示),或者执行 sudo xcodebuild -license 同意许可协议。

然后执行 open -a Simulator 命令,就可以打开一个模拟器,来运行和测试 Flutter 程序,如图

Simulator

配置 Android 开发环境

想用 Flutter 为 Android 平台开发应用,需要下载安装 Android Studio

安装好 Android Studio 后,启动它,首次启动会安装最新的 Android SDK ,但是你可能会遇到这样的问题,如图:

Android Studio

如果遇到这个问题应该就是网络问题(需要科学上网),点 Setup Proxy 来设置代理,如图:

Android Studio

如一切正常,就会提示你需要下载一些东西,如图

Android Studio

点击 Finish 按钮后就会下载安装以上列表的东西,下载安装完 SDK 后,如图:

Android Studio

需要我们打开一个项目,我们可以用刚才已经配置好的 Flutter SDK 的命令行创建一个 Flutter 项目,如执行以下命令

cd ~/desktop
flutter create new_flutter

命令执行完成后,在桌面就会生成一个 Flutter 项目,再用 Android Studio 打开,项目打开后会提示安装 Flutter 插件和依赖 Dart 语言插件 ,安装完之后我们可以去创建一个模拟器。

打开 Tools>AVD Manager ,点击 Create Virtual Device... 来创建一个模拟器,选择一个设备,点击 Next,如图

Android Studio

为模拟器选择一个系统镜像(我选择的是第一个),点击 Download ,下载完成后,点击 Next 后,如图

Android Studio

最后,在模拟性能这里选择 Hardware - GLES 2.0 启动硬件加速,点击 Finish 完成

Android Studio

配置编辑器

前面我们已经配置好了 Flutter SDKiOS 模拟器Android 模拟器 ,最后我们还需要配置一下编辑器,当然您可以选择 Android Studio 或者 VS Code,这里我选择的是轻量级的 VS Code

如对 VS Code 不是很熟悉,可参考我之前写的 VS Code 编辑技巧

打开终端进入我们刚才新建的 Flutter 项目

cd new_flutter

再用 VS Code 打开项目

code ./

打开项目之后 <kbd>⌘</kbd> - <kbd>⇧</kbd> - <kbd>X</kbd> ,打开扩展,安装 Flutter 插件,如图

Flutter install

完成之后,打开项目目录 lib->main.dart 文件, VS Code 会自动提示你安装 Dart 语言扩展包。

运行项目

现在,所有的准备工作都完成了,就可以开发、测试或运行项目了,在上面我们用 Flutter create 命令创建的 Flutter 项目,自带一个计数器的小功能,我们可以运行看看效果

首先,您需要执行 flutter doctor 来检查一下环境是否正常

Flutter run

如上图第二项提示 Android license status unknown. 意思是 Android 协议没安装好,可以执行以下命令,来解决问题

flutter doctor --android-licenses

如上图第三项是 iOS 真机的检查项,可以按照提示操作<br />>
如上图第四项是 Java 的编辑器检查,可不用理会,如你没有安装 IDEA 也不会有这个提示

其实在我另一台电脑上全部都配置好了 😝 ,如图

Flutter run

最后,在 VS Code 编辑器里按 F5 后,会让你选择模拟器来运行 Flutter 程序,如图

Flutter run

这个是分别在 iOS 和 Android 运行 Flutter 的效果,如图

Flutter run

运行 Flutter 案例

现在所有的都准备好了,您可以去我的 GitHub 上下载上篇文章中的案例代码,也可以 git clone

cd $HOME/Desktop #进到桌面
git clone https://github.com/persilee/flutter_pro.git #下载案例
cd flutter_pro #进入案例目录
flutter packages get #获取依赖包
code ./ #用 VS Code 打开

完成以上步骤后,在 VS Code 按 F5 选择模拟器,查看运行效果,如图

Flutter Demo

好的,大功告成,这篇到处为止,下篇将手拉手带大家完成一个实操小案例 。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,680评论 2 59
  • Content: Flutter框架概况发展概述发展历史框架特性框架结构 快速入门安装Flutter在Mac OS...
    EchoZuo阅读 6,455评论 3 54
  • 形上这到底是个什么东西? 新儒家的理论越来越接近于现代的哲学观点了,或者说是西方的哲学,唯心或是唯物! 形而上谓之...
    misself阅读 169评论 0 0
  • 昨天深圳的一个朋友给我吐槽在她身边发生了一个很悲凉的故事,我听完后很是震惊,也感到这个社会不仅仅是以貌取人,还真的...
    05f3ae22a228阅读 476评论 0 0