Mac OS下Flutter环境搭建记录，VS Code开发

安装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开发

安装Flutter

获取FlutterSDK

设置环境变量

检查运新环境

Visual Studio Code运行Flutter程序

装插件

配置launch

配置Settings

创建项目

运行Flutter程序

体验热重载

最新文章

热门文章