在MacOS上搭建Flutter开发环境

参考:FlutterFlutter中文网

笔者是一名iOSer,所以本文接下来记录搭建Flutter环境的过程是建立在电脑上已经安装了iOS开发相关工具,且已安装了Android Studio、IDEA。即使没有安装也不用担心,因为安装上述相关工具很简单,直接移步至参考链接网址即可详见。在此基础上搭建过程很快捷,全程十几分钟。

获取Flutter SDK

  1. flutter官网下载其最新可用的安装包,读者也可以去Flutter github项目 下去下载安装包。

  2. 解压安装包到你想安装的目录,笔者安装路径为用户根目录,命令行查看根目录:

    echo ~   
    // 笔者电脑跟目录:/Users/yxy
    

本文下载的版本:flutter_macos_v1.9.1+hotfix.6-stable.zip。
Flutter SDK 放置在哪一个目录内,获取并记录这个目录的路径,稍后会用到。

flutter存放路径.jpg

配置镜像、环境变量

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

添加flutter相关工具到PATH环境变量中,配置环境变量让其永久生效,在任意一个命令行会话中使用 flutter 命令:

// `pwd`:刚刚记录的flutter SDK安装路径
export PATH="$PATH:`pwd`/flutter/bin"
配置环境变量具体操作:

打开或者创建 shell 的 rc 文件,比如,在 Linux 和 macOS Mojave 或 Mojave 之前的系统里,是默认使用 Bash 的,所以需要修改 HOME/.bashrc 文件。 macOS Catalina 操作系统默认使用 Z Shell,所以需要修改HOME/.zshrc 文件。请知晓,如果你使用不同的 shell,文件目录或文件名可能会有所不同。
命令查看当前正在使用什么shell:

$ echo $SHELL

笔者用的是.zsh,命令查看zsh的安装目录

$ which zsh

1、更改zsh配置文件:

$ vim ~/.zshrc

2、将上述提到的镜像及flutter环境变量同时复制粘贴到.zshrc中(如下图)保存并退出:

镜像及环境变量配置.png

图中的$HOME即为电脑用户根目录路径,也就是flutter安装路径:/Users/yxy,读者根据实际安装路径调整。

3、执行命令使刚配置的环境变量生效:

$  source ~/.zshrc

4、 验证一下flutter环境有没有配置成功,输入:

$ flutter -h

看到如下如的打印信息就是配置成功:


验证.png

通过运行以下命令来验证 flutter/bin 文件夹是否已经添加到 PATH 环境变量中:

$ echo $PATH

验证 flutter 命令是否可用,可以执行下面的命令检测:

$ which flutter
image.png

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装:

$ flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)例如:


查看依赖.jpg

笔者电脑安装了Android Studio、IDEA,所以检测出这两个开发工具没有安装flutter插件

平台配置

macOS 可以允许开发 iOS、Android 和 Web(技术预览版正式发布)三个平台的 Flutter 应用,你可以任选一个平台完成初始配置,以此来搭建并运行起来你的第一个 Flutter 应用。本文以Android Studio为列。

Android Studio配置: 为Flutter提供完整的IDE体验
安装两个插件:
Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).
安装过程如下:

打开 Android Studio。
打开插件设置(macOS 系统打开 Preferences > Plugins, Windows 和 Linux 系统打开 File > Settings > Plugins)。
选择 Marketplace,然后选择 Flutter 插件并点击 安装。
当弹出安装 Dart 插件提示时,点击 Yes。
当弹出重新启动提示时,点击 Restart。

安装插件.jpg

开发体验初探

创建新应用

1、 选择 File>New Flutter Project
2、 选择 Flutter application 作为 project 类型, 然后点击 Next
3、 输入项目名称 (如 flutter_app), 然后点击 Next
4、 点击 Finish
5、 等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目,项目名为flutter_app,其中包含一个使用Material 组件的简单演示应用程序。
在项目目录中,您应用程序的代码位于 lib/main.dart.

运行应用程序

1、 定位到Android Studio 工具栏
2、 在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用,请选择 Tools>Android>AVD Manager 并在那里创建一个
3、 在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.
如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:


image.png

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