Flutter开发环境搭建

2018-11-21 本文已影响0人 Alan_Bei

系统：macOS

工具：VS Code

安装 Flutter

首先下载Flutter macOS版到本地，建议选择Beta版本的最新版本。

这里笔者下载的是v0.11.8的版本，为方便演示，我们将解压后的flutter文件夹拖到桌面。

接下来把 Flutter 的 bin 目录添加到系统 PATH 中：

export PATH=~/desktop/flutter/bin:$PATH

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务,例如：

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel beta, v0.11.8, on Mac OS X 10.14 18A391, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)

[✓] Android Studio (version 3.2)

✗ Flutter plugin not installed; this adds Flutter specific functionality.

✗ Dart plugin not installed; this adds Dart specific functionality.

[✓] VS Code (version 1.29.1)

[✓] Connected device (2 available)

• No issues found!

这里我已经解决了相应的问题了，首次跑出来的结果除了Flutter那一项，基本都是报错，因为没有安装相应的工具，或者版本太老旧，相应的报错会以粗体显示，描述的很详细，这里不要一眼看懵逼了就放弃了，你只需要不断执行该方法，然后安装缺失的依赖，整个过程很流畅，不必解决所有报错，提示“No issues found!”就OK啦，到这里Flutter的基本运行环境基本就搞定了。

设置Visual Studio Code

工具下载地址

（支持汉化😁：在扩展商店中搜索language，会出现中文简体的插件）

安装插件

1.快捷键commond+shift+p调出顶部对话框。

2.输入“install”，然后选择“Extensions：Install Extension”。

3.在搜索框中输入"flutter"，在列表中选择“Chinese (Simplified) Language Pack for Visual Studio Code”，然后点击Install，这时会看到工具在同时安装Flutter和Dart。

4.选择重新加载VS Code以启用服务。

验证环境配置

1.快捷键commond+shift+p调出顶部对话框

2.输入“doctor”，然后选择“Flutter: Run Flutter Doctor”操作

3.查看输出是否有问题

hello world

1.快捷键commond+shift+p调出顶部对话框。

2.输入“flutter”，然后选择“Flutter: New Project”操作。

3.输入项目名称“hello_world”,点击确认。

4.选择项目存放路径，点击确认。

5.放下键盘鼠标，等待main.dart文件生成。

上述命令创建了一个名为hello_world的Flutter项目目录，其中包含一个使用Material Components的简单应用程序示例。

在项目目录中，你的应用程序的代码在lib/main.dart下。

运行APP

1.首先命令行输入“open -a Simulator”，启动一个模拟器。

2.调用 Debug > Start Debugging启动调试，此时窗口会打印出相关进度，等待构建完成。

3.是心动的感觉～