安装Flutter

获取FlutterSDK

终端cd进入SDK安装目录,比如
cd ~/FlutterSDK 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
过程比较漫长,请耐心等待

设置环境变量

open ~/.bash_profile

把下面几句追加到尾部
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH="~/FlutterSDK/flutter/bin:$PATH"
这里要注意,写自己FlutterSDK的路径,前面我SDK放在了~/FlutterSDK下 如果使用zsh的朋友,还需要在 ~/.zshrc 中添加
source ~/.bash_profile 这样就能保证每次启动新的终端时候环境变量生效

注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考https://flutter.io/community/china 以获得有关镜像服务器的最新动态。

检查运新环境

环境变量配置完毕之后,新开启一个终端窗口

flutter docter
[✓] Flutter (Channel dev, v1.10.14, on Mac OS X 10.14.4 18E227, locale
zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.39.2)
[✓] Connected device (1 available) 如果所有的环境全部配置的情况应该是上面这样。如果运行过程中有报错,运行报错提示的命令即可,如
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.12.2 16C67, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
✗ Android SDK file not found: /Users/conan/Library/Android/sdk/platforms/android-28/android.jar.
[!] iOS toolchain - develop for iOS devices
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To install:
brew install cocoapods
pod setup
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2016.3.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
✗ This install is older than the minimum recommended version of 2017.1.0.
[!] IntelliJ IDEA Ultimate Edition (version 2016.3.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
✗ This install is older than the minimum recommended version of 2017.1.0.
[!] Connected devices
! No devices available ! Doctor found issues in 5 categories. 提示已经非常清楚了。安装Xcode和Android Studio 然后执行对应的命令,这里不多赘述

Visual Studio Code运行Flutter程序

  • 装插件

    应用商店中 搜索 dart 、Flutter 安装
  • 配置launch

    开启launch.json,点击左边的 虫子(debug)图标,左上角的⚙齿轮图标(设置)配置如下
    
    {
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "program": "~/HelloWorld/hello_world/lib/main.dart",
    }
    ]
    }
  • 配置Settings

    设置settings.json文件,点击左下角的齿轮⚙,选择”设置“打开设置界面。 用户选项卡-->扩展-->Run Code configuration. 找到”在settings.json中编辑“,点击打开settings.json页面。
    
    {
    "window.zoomLevel": 0,
    "editor.fontSize": 16,
    "editor.wordWrap": "on",
    "leetcode.endpoint": "leetcode-cn",
    "code-runner.runInTerminal": true, //这里需要设置成YES
    "dart.flutterSdkPath": "~/FlutterSDK/flutter", //FlutterSDK的安装路径
    "dart.checkForSdkUpdates": false
    }

  • 创建项目

    1.command + shift + p 或者 查看->命令面板
    2.输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
    3.输入 Project 名称 (如hello_world), 然后按回车键
    4.指定放置项目的位置,然后按蓝色的确定按钮
    5.等待项目创建继续,并显示main.dart文件
  • 运行Flutter程序

    1.确保在VS Code的最底部蓝色条选择了目标设备
    2.按 F5 键或调用Debug>Start Debugging
    3.等待应用程序启动
    如果一切正常,在应用程序建成功后,就可以在设备或模拟器上看到应用程序
  • 体验热重载

    vscode修改工程中lib/main.dart
    将字符串
    'You have pushed the button this many times:' 更改为
    'hello world:' 按快捷键 command + s, 或者点击 热重载按钮 (绿色圆形箭头按钮). 立刻就可以看见文件改变了。非常的爽。

Mac OS下Flutter环境搭建记录,VS Code开发的更多相关文章

  1. Mac OS下Appium环境搭建及Genymotion模拟器安装

    说明:本机Mac本上已经安装的有:Python3.JDK.Node.js. Selenium Appium环境搭建 Step1:安装Appium Python Client库 1,命令:pip ins ...

  2. win7系统下flutter环境搭建+AndroidStudio编译插件

    flutter学习网址:https://flutter-io.cn/ ----------------------------------------------------------------- ...

  3. linux下ffmpeg环境搭建记录

    1.Linux下安装yasm 官网下载:http://yasm.tortall.net/Download.html tar -zvxf yasm-1.3.0.tar.gz cd yasm-1.3.0/ ...

  4. Windows下mock环境搭建-加速项目Api开发

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 公司进行技术部拆分,以项目制作为新的开发模式,前端+移动端+后端,于是加速Api开发变得很有必要,准 ...

  5. win7下docker环境搭建nginx+php-fpm+easyswoole开发环境

    基础的环境已在文章nginx.php-fpm.swoole HTTP/TCP压测对比中搭建了,现在是在这个基础上在搭建easyswoole开发环境 主要要修改的地方是dnmp包里面的docker-co ...

  6. win7下docker环境搭建nginx+php-fpm+easyswoole+lavarel+mysql开发环境

    win7环境基础在上一篇win7下docker环境搭建nginx+php-fpm+easyswoole开发环境中已经详细叙述搭建完成 本篇文章将叙述如何在上述基础上搭建laravel开发环境,这个其实 ...

  7. mac os 下搭建android开发环境

    mac os 下搭建android开发环境 周银辉 mac os 下搭建android环境比较方便, 如下几个步骤: 1,安装jdk 先搞清楚自己是否已经安装,在命令行下:java -version, ...

  8. RF+Appium框架自动化测试系列一之(Mac下Appium环境搭建)万事开头难

    消失了3个月,有一段时间没来园子更新博客了,各位看官见谅哈哈,消失是因为刚换了工作环境没外网,好多笔记没能及时的记录分享,以后有时间慢慢补上吧,这段时间主要接触了移动端app的自动化测试,公司为了快速 ...

  9. Mac OSX系统中Hadoop / Hive 与 spark 的安装与配置 环境搭建 记录

    Mac OSX系统中Hadoop / Hive 与 spark 的安装与配置 环境搭建 记录     Hadoop 2.6 的安装与配置(伪分布式) 下载并解压缩 配置 .bash_profile : ...

随机推荐

  1. git使用以及对应sourceTree

    git上面的几条指令 (1)要想把A合并到B分支上,就需要先切换到B分支上,然后在合并A分支,执行指令: git checkout B // 这是切换到B分支上 git merge A // 这是将A ...

  2. MySQL on duplicate key update 批量插入并更新已存在数据

    业务上经常存在一种现象,需要批量往表中插入多条数据,但在执行过程中,很可能因为唯一键冲突,而导致批量插入失败.因此需要事先判断哪些数据是重复的,哪些是新增的.比较常用的处理方法就是找出已存在的数据,并 ...

  3. 官宣!VS Code Python 全新功能在 PyCon China 全球首发!

    北京时间 2019 年 9 月 21 日,PyCon China 2019 在上海举行. 在下午的演讲中,来自微软开发工具事业部的资深研发工程师 在演讲中,我们看到了 Azure Notebook 与 ...

  4. 使用vue-cli脚手架快速构建项目

    1.创建一个文件夹,vscode打开 2.ctr + shift+` 打开指令窗口 3.npm i vue-cli -g   安装vue-cli 4.vue -V 测试安装版本 检查是否安装成功 5. ...

  5. vue-cli3.0中使用 postcss-pxtorem

    vue.config.js module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ req ...

  6. 2019-11-29-Roslyn-打包自定义的文件到-NuGet-包

    title author date CreateTime categories Roslyn 打包自定义的文件到 NuGet 包 lindexi 2019-11-29 08:23:21 +0800 2 ...

  7. 清除windows 远程桌面访问记录 批处理

    直接上码供参考 @echo OFF color 0a Title Clear Windows Recent Mode con cols=109 lines=30 :START ECHO. Echo = ...

  8. 021-Zabbix4.2对IIS监控摸索记录

    Zabbix是很强大,但是相关的细节技术文档貌似很少,摸索之路就显得异常难. 度娘搜了下,关于Zabbix对IIS的监控资料确实有,确实也讲如何操作了,但是细细按照对方的要求操作下,总是缺数据,no ...

  9. Linux日常之命令uniq

    命令uniq 作用是过滤文件内容重复部分 需要注意的是,该命令只是对相邻的行进行比较,若两个相同的行不相邻,不会被过滤掉 选项 -c,在每行行首显示出该行出现的次数 -d,只显示出重复的行 -u,只显 ...

  10. Awkward Response AtCoder - 2656 ( 二分+交互题)

    Problem Statement This is an interactive task. Snuke has a favorite positive integer, N. You can ask ...