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

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

推荐阅读更多精彩内容