美文网首页
Flutter - 开发环境搭建(Mac-iOS-VS Code

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

作者: kuckyson | 来源:发表于2019-06-26 15:19 被阅读0次

    使用镜像

    由于在国内访问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

    相关文章

      网友评论

          本文标题:Flutter - 开发环境搭建(Mac-iOS-VS Code

          本文链接:https://www.haomeiwen.com/subject/dbggwttx.html