Flutter - 开发环境搭建(Mac-iOS-VS Code)

使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中(打开隐藏文件command+shift+. ,找到自己根目录.bash_profile文件,将以下添加到文件中):

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

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


获取Flutter SDK

1.去flutter官网下载其最新可用的安装包,转到下载页 。

https://flutter.io/sdk-archive/#macos注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包,转到下载页 。

2.下载好之后解压到指定的目录(我的安装目录~/Documents )

3.添加flutter相关工具到path(根目录.bash_profile文件)中:

export PATH=~/Documents/flutter/bin:$PATH (~/Documents 是我的安装路径,你需要将这个地方替换为你自己对应的安装路径)

4.终端运行 source $HOME/.bash_profile 刷新当前终端窗口

5.终端通过运行 echo $PATH 命令验证目录是否在已经在PATH中:

运行 flutter doctor 检查当前的安装情况

在终端运行flutter doctor ,未安装homebrew的需要安装一下,

然后根据提示brew安装需要的插件(友情提示:brew update 指令不需要执行)

Xcode 开发环境正常配置

配置编辑器 - VS Code

Visual Studio Code (VS Code) 安装

VS Code: 轻量级编辑器,支持Flutter运行和调试

安装 VS CodeVS Code, 安装1.20.1或更高版本.

安装Flutter插件

1.启动 VS Code

2.调用 View>Command Palette…

3.输入 ‘install’, 然后选择 Extensions: Install Extension action

4.在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

5.选择 ‘OK’ 重新启动 VS Code

体验flutter

创建新的应用

启动 VS Code

调用 View>Command Palette…

输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action

输入 Project 名称 (如myapp), 然后按回车键

指定放置项目的位置,然后按蓝色的确定按钮

等待项目创建继续,并显示main.dart文件

上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件的简单的演示应用程序。

在项目目录中,您的应用程序的代码位于 lib/main.dart.

运行应用程序

确保在VS Code的右下角选择了目标设备

调用Debug>Start Debugging

等待应用程序启动

如果一切正常,在应用程序建成功后,您应该在您的设备或模拟器上看到应用程序:

体验热重载

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。

用你喜欢的编辑器打开文件lib/main.dart

将字符串

'You have pushed the button this many times:' 更改为

'You have clicked the button this many times:'

不要按“停止”按钮; 让您的应用继续运行.

要查看您的更改,请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮).

你会立即在运行的应用程序中看到更新的字符串

VS Code 白屏及热重载不能正常使用

如果使用Mac 环境,Xcode 调试flutter,同时你没有管理员权限的话,会导致你的flutter 热重载功能不能正常使用,VS Code调试器调试会出现白屏的问题

具体issue链接:https://github.com/flutter/flutter/issues/18409

尝试了zoechi  的方法,还是不行

查看log:

Launching lib/main.dart on iPhone X in debug mode...

log: Must be admin to run 'stream' command

Script started,output file is /dev/null

解决思路:

1.获取电脑管理员权限

2.安装iOS10以下模拟器进行调试(安装xcode模拟器也需要管理员权限)

OVER,THANKS

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

推荐阅读更多精彩内容