谈谈Flutter

2018世界移动大会上,科技巨头Google发布了Flutter首个beta版本,加之早前Facebook的React Native,将来必将形成React Native和Flutter两大阵营。科技巨头们的努力,终极目标必定是降低开发成本、提高产品质量,一统移动端江湖。

与React Native不同的是,Flutter使用Dart作为基础开发语言,一切皆Widget的开发理念,开发移动应用。Flutter具有集成已有项目以及与iOS、Android原生框架交互能力,为了方便开发者快速接受Flutter,官方还提供了Web/iOS/Android/React Native/Xamarin.Forms开发者参考文档。还未上车的小伙伴,还在等什么,赶快跟着郝先生搭建起你的开发环境吧。

由于郝先生使用的是MacOS,因此Windows和Linux的小伙伴就只能委屈参考一下官方文档了,对于工作多年的你,搭个环境应该十分简单。

1. 请下载Flutter SDK,地址:https://flutter.io/sdk-archive/#macos

谈谈Flutter

2. 在桌面建立文件夹,然后将SDK放到该文件夹下。

3. 设置环境变量及镜像

①	打开终端
② 输入:vim .bash_profile
③ 输入:i
④ 输入:
注意将用户名修改为你的用户名!!!
#flutter
export PATH_TO_FLUTTER_GIT_DIRECTORY=/Users/用户名/Desktop/flutter
export PATH=${PATH}:${PATH_TO_FLUTTER_GIT_DIRECTORY}/bin
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export ANDROID_HOME=/Users/hao/Library/Android/sdk
⑤ 按下esc键
⑥ 输入(冒号)::
⑦ 输入:wq
⑧ 输入:source .bash_profile

4. 尽管有多种编辑器可以选择,但是强烈建议使用IntelliJ IDEA,一款功能强大的IDE,像什么前端、后端、安卓都可以使用它来开发,比起Android Studio、Eclipse、Webstorm好用的多。请移步这里下载:https://www.jetbrains.com/idea/download

5. 使用Mac的开发者想必Xcode都有吧,若没有,请移步这里下载:https://developer.apple.com/xcode

6. 配置Flutter、Dart插件

① 打开IntelliJ IDEA

② 打开Preferences

谈谈Flutter

③ 打开插件中心

谈谈Flutter

④ 安装Flutter插件

谈谈Flutter

⑤ 安装Dart插件

谈谈Flutter

7. 安装Android SDK,请前往官网下载并安装。

8. 申请苹果开发账号(也可以先使用你能公司的账号),登入账号,新建开发证书,然后回到xcode中配置账号信息,详细信息,请前往官网查看引导。

谈谈Flutter

9. 打开终端,输入:flutter doctor,如果出现[!]或x说明配置不正确,可以按照提示信息配置。常见问题出现在7、8步骤,请仔细检查。另外最后一条信息[!] Connected device,代表真机连接数量,不影响开发。

好了,先谈这些,后期郝先生会陆续更新关于Flutter的技术文章。周末又结束了,大家早点休息,打好精气神迎接新的一周。


分享到:


相關文章: