Mac 笔记本 flutter 开始启航(一)开发环境搭建

前言

最近身边好多朋友都在学习flutter,而自己在在招聘网站上也看到很多招flutter开发工程师,所以也要拥抱新的技术变化。

准备

自己在网上查找了一番,最后觉得还是从flutter中文网开始学习靠谱点。
flutter接口文档:https://api.flutter.dev
flutter实战电子书:https://book.flutterchina.club

1.环境的搭建

本人的是mac 笔记本,所以按如下搭建:入门: 在macOS上搭建Flutter开发环境

1.1安装flutter sdk

来到 flutter sdk releases 界面 https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
选中macos下

sdk.png

sdk 下载完后直接双击解压在桌面的

屏幕快照 2019-05-20 上午11.16.37.png

按着英文文档中的步骤操作 https://flutter.dev/docs/get-started/install/macos
终端命令行一波(具体看英文文档)

9CB6B61A-7AC8-4371-B080-0A145052FD5F.png

1.2更新环境变量

在英文文档中为什么要配置环境变量,当时我没明白。后来理解了,因为在终端中要用到flutter命令,而更新环境变量操作后,就指定了path ,就不会再打开终端时报flutter: command not found了。

环境变量.png

在 .bash_profile文件添加命令时用 vim ~/.bash_profile 来创建,下图如是:

更新环境变量.png

小插曲去安装Brew工具

终端安装命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 等待几分钟就Homebrew就安装完了。brew是什么可以参考:Mac OS下brew的安装和使用
为了解决brew报错按步骤一个个安装

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

装完之后再 flutter doctor检测一波,及只一报错的解决办法

终端.png

1.2安装安卓sdk

本人mac电脑是已安装xcode的,所以现在报Android的错, android 下载https://developer.android.com/studio
打开之后直接安装 Android SDK components

屏幕快照 2019-05-20 下午1.52.34.png

安装了Android SDK 后再次运行flutter doctor
android.png

.解决licenses 错误 flutter doctor --android-licenses

Android Studio 配置与使用

上图报的错误是Android studio没有添加flutter插件,于是:

插件.png

安装完后,再重启Android studio
flutter doctor检测一波
检测.png

哈哈~,终于没有报错了。

最后

用Android studio 新建flutter工程


新建.png

flutter界面.png

在iphone7模拟器上运行效果


在模拟器iphone 7上运行.png

在Android模拟器上运行(这里要添加Android模拟器Tools->AVD Manager)
Android.png

1.环境就这样搭建好了,在macOS Mojave系统上
2.后面学习Dart语言及工程编译

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容