安装Flutter


Android和IOS两个平台依赖Android SDK和iOS SDK
安装Flutter需要安装相应平台的构建工具和SDK
国内访问Flutter 受到限制 Flutter官方为中国开发者搭建了临时镜像
添加 PUB_HOSTED_URL
添加 FLUTTER_STORAGE_BASE_URL
PUB_HOSTED_URL "https://pub.flutter-io.cn"
Path "%PATH%;%PUB_HOSTED_URL%";
FLUTTER_STORAGE_BASE_URL "https://storage.flutter-io.cn"
Path "%PATH%;%FLUTTER_STORAGE_BASE_URL%";
将如下环境变量加入到用户环境变量中
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
 //flutter.io/community/china  获得有关镜像服务器的最新动态

Windows Flutter

Flutter安装详细教程
1.安装flutter插件
2.安装dart
3下载 flutter sdk
flutter官网下载其最新可用的安装包
Flutter的渠道版本会不停变动Flutter官网为准
//docs.flutter.dev/development/tools/sdk/releases?tab=windows#windows
中国大陆想正常获取安装包列表或下载安装包需要翻墙可以去Flutter github项目下去下载安装包
https://github.com/flutter/flutter/releases
将安装包zip解压到你想安装Flutter SDK的路径
Flutter安装目录的flutter文件下找到flutter_console.bat
双击运行并启动flutter命令行
就可以在Flutter命令行运行flutter命令了
4.配置环境变量
在系统变量中添加变量(参考下图理解)
变量名 FLUTTER_HOME
变量值 flutter sdk安装目录
FLUTTER_HOME
f:\flutter\sdk
系统环境变量中找到Path
并添加变量(注意 系统环境变量)
变量值 %FLUTTER_HOME%\bin
变量值 %FLUTTER_HOME%\bin\cache\dart-sdk
在用户环境变量中添加(注意 这里是用户环境变量)
变量名 PUB_HOSTED_URL
变量值 https://pub.flutter-io.cn
变量名 FLUTTER_STORAGE_BASE_URL
变量值 https://storage.flutter-io.cn
准备就绪打开cmd运行
flutter doctor
vscode中导入flutter项目后很多报红报错
flutter pub get
依赖安装完以后vscode应该就不会报这些错了
flutter doctor
Flutter命令行运行 命令来查看是否还需要安装依赖
flutter doctor
检查的环境并在命令行窗口中显示报告
Dart SDK已经在打包在Flutter SDK里了
仔细检查命令行输出以获取 需要安装的 软件 或 执行的任务。
[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
第一次运行flutter命令
flutter doctor 会下载它自己的依赖项并自行编译
flutter doctor

Android设置
Flutter依赖于Android Studio的全量安装
Android Studio不仅管理Android 平台依赖 SDK版本等也是Flutter开发推荐的IDE之一
启动Android Studio
执行 Android Studio安装向导
安装最新的Android SDK Android SDK平台工具和Android SDK构建工具

macOS Flutter开发环境

masOS 同时进行Android和iOS设备的测试
系统要求运行Flutter 开发环境 最低要求 操作系统 macOS (64-bit)
磁盘空间 700 MB (不包括Xcode或Android Studio的磁盘空间).
工具: Flutter 依赖下面这些命令行工具 bash mkdir rm git curl unzip which
获取Flutter SDK
官网地址 //flutter.io/sdk-archive/#macos
解压安装包到想安装的目录cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
添加flutter相关工具到path中
export PATH=`pwd`/flutter/bin:$PATH
运行 flutter doctor命令
更新环境变量
将Flutter添加到PATH中 可以在任何终端会话中运行flutter命令
会在打开新窗口时将设置环境变量的命令添加到执行的文件中
确定Flutter SDK的目录记为 FLUTTER_INSTALL_PATH 将在步骤3中用到
$HOME/.bash_profile
添加以下路径
export PATH=[FLUTTER_INSTALL_PATH]/flutter/bin:$PATH
export PATH=~/code/flutter_dir/flutter/bin:$PATH
运行 source $HOME/.bash_profile 刷新当前终端窗口
如果使用终端是 zsh 终端启动时 ~/.bash_profile 将不会被加载
解决办法就是修改 ~/.zshrc
在其中添加:source ~/.bash_profile
验证“flutter/bin”是否已在PATH中
echo $PATH

安装 Xcode

iOS开发Flutter应用程序 要Xcode 9.0或更高版本
配置Xcode命令行工具以 新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
使用最新版本的Xcode时,这是正确的路径。如果需要使用不同的版本,请指定相应路径。
确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了
使用Xcode 可以在iOS设备或模拟器上运行Flutter应用程序

安装Android Studio


升级 Flutter

Flutter SDK分支
Flutter SDK有多个分支,如beta、dev、master、stable,
stable 稳定分支
dev和master为开发分支
安装flutter后,可以运行flutter channel查看所有分支
结果如下
Flutter channels
beta
dev
* master
带"*"号的分支即本地的Flutter SDK 跟踪的分支,
要切换分支 使用flutter channel beta 或 flutter channel master
Flutter官方建议跟踪稳定分支
升级Flutter SDK和依赖包
要升级flutter sdk
flutter upgrade
该命令会同时更新Flutter SDK和的flutter项目依赖包。
如果只想更新项目依赖包(不包括Flutter SDK)
可以使用如下命令:
flutter packages get     获取项目所有的依赖包。
flutter packages upgrade 获取项目所有依赖包的最新版本

IDE配置

Flutter官方建议 Android Studio和VS Code 以获得更好的开发体验
Flutter官方提供 编辑器插件
通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能
提高开发效率
Android Studio和VS Code的配置及使用
Android Studio 配置与使用
Android Studio是基于IntelliJ IDEA开发的 可以使用IntelliJ IDEA
安装Flutter和Dart插件
安装两个插件
Flutter插件 支持Flutter开发工作流 (运行、调试、热重载等)。
Dart插件 提供代码分析 (输入代码时进行验证、代码补全等)。
安装步骤
启动Android Studio 打开插件首选项 (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)。
选择 Browse repositories…,选择 flutter 插件并点击 install
重启Android Studio后插件生效
用Android Studio创建一个Flutter项目
运行体验 热重载
创建Flutter应用选择 File>New Flutter Project
选择 Flutter application 作为 project 类型, 然后点击 Next
输入项目名称 (如 myapp),然后点击 Next点击 Finish
等待Android Studio安装SDK并创建项目
项目名为myapp其中包含一个使用 Material 组件的简单演示应用程序
项目目录 应用程序的代码位于 lib/main.dart
运行应用程序 定位到Android Studio工具栏
在 target selector 中
选择一个运行该应用的Android设备
如果没有列出可用,请选择 Tools>Android>AVD Manager 并在那里创建一个
在工具栏中点击 Run图标
应该在的设备或模拟器上会看到启动的应用程序

热重载

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期
热重载无需重启应用程序就能实时加载修改后的代码且不丢失状态
简单的对代码进行更改
后告诉IDE或命令行工具需要重新加载(点击reload按钮)
就会在的设备或模拟器上看到更改
打开lib/main.dart文件
将字符串 'You have pushed the button this many times:'
更改为 'You have clicked the button this many times:'
不要按“停止”按钮; 让的应用继续运行要查更改,请调用 Save (cmd-s / ctrl-s),
或点击 热重载按钮 (带有闪电⚡️图标的按钮)会立即在运行的应用程序中看到更新的字符串

VS Code 配置

VS Code是轻量级编辑器支持Flutter运行和调试
安装flutter插件
启动 VS Code
调用 View>Command Palette…
输入 install 后选择 Extensions: Install Extension action。
在搜索框输入 flutter  搜索结果列表中选择 Flutter 后点击 Install
选择 OK 重新启动 VS Code 验证配置
调用 View>Command Palette…
输入 doctor 后选择  Flutter: Run Flutter Doctor
查看“OUTPUT”窗口中的输出是否有问题

创建Flutter应用

启动 VS Code
调用 View>Command Palette…
输入 flutter 后选择 Flutter: New Project
输入 Project 名称 (如myapp), 然后按回车键
指定放置项目的位置 后按蓝色的确定按钮
等待项目创建继续 显示main.dart文件

体验热重载

打开lib/main.dart文件。
将字符串 You have pushed the button this many times: 更改为  You have clicked the button this many times:
不要按“停止”按钮; 让的应用继续运行
要查看的更改,请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮)。
会立即在运行的应用程序中看到更新的字符串

设备运行Flutter应用

Window下只支持为Android设备构建并运行Flutter应用
macOS同时支持iOS和Android设备
连接Android模拟器
要准备在Android模拟器上运行并测试Flutter应用
启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
选择一个设备并选择 Next
为要模拟的Android版本选择一个或多个系统印象,然后选择 Next. 建议使用 x86 或 x86_64 image .
在 “Emulated Performance”下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
验证AVD配置是否正确,然后选择 Finish。
有关上述步骤的详细信息,请参阅 Managing AVDs.
在“Android Virtual Device Manager”中,点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。
运行 flutter run 启动的设备。 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列,如 x86

Android真机设备

要准备在Android设备上运行并测试Flutter应用,要Android 4.1(API level 16)或更高版本的Android设备.
在Android设备上启用 开发人员选项 和 USB调试 使用USB将手机插入电脑。
如果设备出现调试授权提示,请授权的电脑可以访问该设备。
在命令行运行 flutter devices 命令以验证Flutter识别连接的Android设备。
运行启动应用程序 flutter run
Flutter使用的Android SDK版本是基于的 adb 工具版本
如果想让Flutter使用不同版本的Android SDK
则必须将该 ANDROID_HOME 环境变量设置为相应的SDK安装目录

iOS模拟器

在iOS模拟器上运行并测试Flutter应用
MAC通过 Spotlight 或以下命令找到模拟器
open -a Simulator
通过检查模拟器 Hardware > Device 菜单中的设置 确保模拟器正在使用64位设备(iPhone 5s或更高版本)。
根据电脑屏幕大小,模拟高清屏iOS设备可能会溢出屏幕
模拟器的 Window> Scale 菜单下设置设备比例
运行 flutter run启动flutter应用程序

iOS真机设备

Flutter应用安装到iOS真机设备,需要一些额外的工具和一个Apple帐户,还需要在Xcode中进行一些设置
安装 homebrew 打开终端并运行如下这些命令
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
命令中的任何一个失败并出现错误
请运行brew doctor并按照说明解决问题.
遵循Xcode签名流程来配置的项目
在Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace.
在Xcode中,选择导航面板左侧中的Runner项目。
在Runner target设置页面中,确保在 General > Signing > Team 下选择了的开发团队
当选择一个团队时,Xcode会创建并下载开发证书,向的设备注册的帐户,并创建和下载配置文件(如果需要)。
要开始的第一个iOS开发项目,可能需要使用的Apple ID登录Xcode
任何Apple ID都支持开发和测试
但若想将应用分发到App Store,就必须注册Apple开发者计划,有关详情读者可以自行了解。
当第一次attach真机设备进行iOS开发时
需要同时信任的Mac和该设备上的开发证书
首次将iOS设备连接到Mac时,请在对话框中选择 Trust
添加信任
转到iOS设备上的设置菜单,选择 常规>设备管理 并信任的证书。
如果Xcode中的自动签名失败,请验证项目的 General > Identity > Bundle Identifier 值是否唯一
验证bundle id是否唯一  运行 flutter run启动flutter应用程序

常见配置问题

Android Studio问题
缺少依赖库问题 安卓最常遇见的问题之一 此时点击超链接即可自动跳转到安装页面
安装之后重新运行即可
install_request_components.png
连接不上Android Repository最常见的问题之一 当发现自己无法下载部分依赖的时候
进入 File -> Settings -> Appearance & Behavior -> System Settings -> Android SDK -> SDK Update Sites 列表
以看到此时的 Android Repository 无法连接
下载依赖失败这是由于要去Google下载Android SDK 国内目前无法访问Google所致
可以配置代理或使用vpn
安卓包配置问题
Could not HEAD **
Could not Get **
Android Studio Could not GET gradle-3.2.0.pom
是由于无法连接到 Maven 库造成的
进入当前所在项目名/android
打开 build.gradle
找到下面这一部分,并加上 maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
allprojects {
repositories {
google()
jcenter()
maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' } //添加这一句
}
}
进入 File/ Settings/ Build, Execution, Deployment/ BuildTools/ Gradle/ Android Studio 中
勾选上 Enable embedded Maven repository ,重启 Android Studio 即可解决。
存在这样的一种情况,当根据上述步骤设置了之后,依旧无法解决这个问题
并有类似于 Could not HEAD maven.aliyun.com 的报错信息
请检查 C:\Users\{user_name}\.gradle\gradle.properties 是否有设置代理
删除后问题即可解决
Hot Reload 热重载失效问题
Terminal 之类的终端模拟器设置代理之后 导致 Hot Reload 重载失效
此时调用 Save (cmd-s / ctrl-s)将不会进行热重载,热重载按钮 (带有闪电⚡️图标的按钮)也不会显示
将代理移除即可解决
有些情况下热重载是不生效的,比如修改了main函数、修改了全局静态方法等
Hot Reload 只会重新构建整个widget树 如果变动不在构建widget树的过程中
Hot Reload 不会起作用

Flutter 安装和flutter-install相关