Flutter - 安装流程

Flutter 安装流程

系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
工具: Flutter 依赖下面这些命令行工具.
bash, mkdir, rm, git, curl, unzip, which

获取 Flutter SDK

  1. 下载最新的 Flutter SDK. 或者自己选择指定版本的 sdk

  2. 下载好 zip 文件后,将 zip 拷贝到自己想要存放的目录,然后解压。比如我的安装目录是用户目录下的新建 develop 文件夹中的 flutter 文件夹:/Users/kira/Develop/flutter

unzip ~/Develop/flutter/flutter_macos_v1.5.4-hotfix.2-stable.zip
  1. 添加 flutter 相关工具到 Path 中。文件安装目录包括之后提到的示范中,都是 /Users/kira/Develop/flutter。
export PATH=$PATH:/Users/kira/Develop/flutter/bin

如果执行成功了,那么继续在终端中输入 flutter doctor 会输出类似以下信息:

flutter doctor.png

目前只能在当前目录下执行 flutter 命令,想永久把 flutter 添加到PATH中请参考下面更新环境变量部分

  1. 更新环境变量
    如果需要把 flutter 全局访问,那么我们需要首先把设置环境变量的命令添加到执行的文件中。

打开或者创建 ~/.bash_profile 文件,然后往文件中添加一下内容

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Develop/flutter/bin:$PATH

上面两行是国内用户需要设置,最后一行也是按照格式输入内容就好。默认的 flutter 安装目录还是 /Users/kira/Develop/flutter。
在添加内容之后,运行 source $HOME/.bash_profile 刷新当前终端窗口。

然后退出到任何目录,再次执行 flutter doctor 命令,如果生效则说明环境变量修改成功了。

然后可以根据 flutter doctor 检测提示未完成的 issue,根据提示继续配好环境。

平台设置

以下以 iOS 平台为例

  1. 下载好 Xcode7.2或更高版本

  2. 配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。

  3. 确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.

使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。

安装到模拟器或者真机

  • 安装到模拟器
  1. 在Mac上,通过Spotlight或使用以下命令找到模拟器:
open -a Simulator
  1. 运行 flutter run启动您的应用。
  • 安装到真机
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

配置编辑器

编辑器可以使用 Android Studio 或者 Visual Studio Code。两个都比较方便,可以安装 Flutter 的插件进行开发。

Android Studio 安装

安装Flutter和Dart插件

需要安装两个插件:

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

要安装这些:

启动Android Studio.
打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).

选择 Browse repositories…, 选择 Flutter 插件并点击 install.

重启Android Studio后插件生效.

VS Code 安装

安装Flutter插件

启动 VS Code

调用 View>Command Palette…

输入 ‘install’, 然后选择 Extensions: Install Extension action

在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

选择 ‘OK’ 重新启动 VS Code

通过Flutter Doctor验证您的设置

调用 View>Command Palette…

输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action

查看“OUTPUT”窗口中的输出是否有问题

体验

Android Studio

创建新应用

选择 File>New Flutter Project

选择 Flutter application 作为 project 类型, 然后点击 Next
输入项目名称 (如 myapp), 然后点击 Next

点击 Finish

等待Android Studio安装SDK并创建项目.

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

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

运行应用程序

VS Code

启动 VS Code

调用 View>Command Palette…

输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action

输入 Project 名称 (如myapp), 然后按回车键

指定放置项目的位置,然后按蓝色的确定按钮

等待项目创建继续,并显示main.dart文件

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

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

运行应用程序

确保在VS Code的右下角选择了目标设备

按 F5 键或调用Debug>Start Debugging
等待应用程序启动

最后

应用启动完成后,基本环境就算搭建好了。(其实这篇只能算是笔记,具体参照参考资料给出的官方链接)

参考资料

入门: 在macOS上搭建Flutter开发环境

MacOS install

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容