Mac下搭建Flutter开发环境

96
寒桥
0.6 2018.12.13 12:30* 字数 978

由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Flutter时也需要安装响应平台的构建工具和
SDK。

1、获取Flutter SDK

去Flutter官网下载其最新可用的安装包,官网地址:https://flutter.io/sdk-archive/#macos

官网下载SDK.png

下载之后解压,存放到一个目录之下,我存放的目录是/Users/xietao/Documents

2、使用镜像和配置环境变量

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

使用命令:vi ~/.bash_profile

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xietao/Documents/flutter/bin:$PATH

最后一个环境变量是flutter sdk的目录

然后保存:wq退出vi环境

运行 source $HOME/.bash_profile 刷新当前终端窗口。这时候新增加的环境变量就生效了

可以使用echo $PATH来验证flutter/bin是否已在PATH中。

3、运行flutter doctor来查看是否还需要安装其它依赖

运行后会发现缺少一些其他依赖,就按照提示一个个安装好就行


运行doctor检查.png

安装好之后如下显示就可以了,我这里没有管IntelliJ IDEA


安装依赖完成.png

4、更新flutter

查看Flutter各个分支,使用命令Flutter channel

图片.png

*号的分支即你本地的Flutter SDK 跟踪的分支,要切换分支,可以使用flutter channel betaflutter channel master,Flutter官方建议跟踪稳定分支,但你也可以跟踪master分支,这样可以查看最新的变化,但这样稳定性要低的多。

要升级flutter sdk,只需一句命令:flutter upgrade

该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包(不包括Flutter SDK),可以使用如下命令:

flutter packages get 获取项目所有的依赖包。
flutter packages upgrade 获取项目所有依赖包

的最新版本。

5、IDE配置与使用

理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序,比如上边没有配置的IntelliJ IDEA也可以。 不过,Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件,通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能,可以帮助我们极大的提高开发效率。下边介绍一下Android Studio的配置

安装两个插件:Dart和Flutter

  • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等)。
  • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等)

安装步骤:

  • 启动Android Studio。
  • 打开插件首选项 (Preferences>Plugins)。
  • 选择 Browse repositories…,选择 flutter 插件并点击 install。
  • 重启Android Studio后插件生效。

接下来,让我们用Android Studio创建一个Flutter项目,然后运行它,并体验“热重载”。

6、创建Flutter项目

安装好插件之后,重启Android Studio在面板上就会多了一个创建Flutter的选项,点击创建一个Flutter项目

  • 选择 File>New Flutter Project 。
  • 选择 Flutter application 作为 project 类型, 然后点击 Next。
  • 输入项目名称 (如 first_flutter_app),然后点击 Next。
    点击 Finish。
  • 等待Android Studio安装SDK并创建项目。

上述命令创建一个Flutter项目,项目名为first_flutter_app,其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中,您应用程序的代码位于 lib/main.dart。


创建Flutter项目.png
创建应用.png

一步一步进行


创建应用2.png
代码部分.png

iPhone上运行效果


iPhone上效果.png

Android上运行效果


Android上效果.png
日记本