1. 简介
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter会对比之前的描述, 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
Flutter的第一个版本被称为“Sky”,运行在Android操作系统上。1.0版本于2018年12月5日(北京时间)发布。未来预计应用在Google的新操作系统Fuchsia上。
2. Flutter环境搭建
2.1 设置镜像
在使用Fultter指令时,有些时候会联网下载依赖资源。在国内通过Flutter访问网络有时会不稳定,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
以windows版为例,找到“环境变量”,在“用户变量”中新建以下两个环境变量
此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。
2.2 系统要求
要安装并运行Flutter,您的开发环境必须满足以下最低要求:
- 操作系统: Windows 7 或更高版本 (64-bit)
- 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
- 命令行工具: Git for Windows和Windows Power Shell
如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。如果是32位的Windows系统,请将Program Files换成Program File (X86)
2.3 安装Flutter SDK
2.3.1 下载Fullter安装包
在Fultter官网上下载最新可用安装包,最好使用stable稳定发布版
-
Flutter下载页面
点击“Windows”进入下载页面
因为网络不稳定原因,有时蓝色按钮可能显示“Fail”,请多次刷新页面尝试
-
windows系统Flutter安装包
因为网络不稳定原因,有时表格中显示为“Loading”,请多次刷新页面尝试
2.3.2 解压Fullter安装包
将下载后的安装包解压,路径中最好不要有中文和空格,不要使用系统中需要高授权的路径
2.3.3 配置环境变量
在“环境变量”中“用户变量”的Path中,追加“flutter\bin”的完整路径。如果没有Path可以进行新建
或
2.3.4 运行flutter doctor指令检查依赖
目前只能在命令行提示符(cmd)或Windows Power Shell中执行flutter doctor指令。
第一次运行flutter doctor指令时,它会下载它自己的依赖项并自行编译,时间可能较长。如果没有在2.1小节配置flutter的镜像环境变量,指令可能运行失败。
3. Android Studio中Flutter项目环境搭建
3.1 Android SDK
在第2小节中执行flutter doctor指令后发现系统中没有安装Android SDK,这时需要安装它。
3.1.1 Android SDK安装
访问官网下载Android SDK,由于网络不稳定原因,大部分时间无法访问Android SDK官网,请利用稳定网络资源进行下载。
注意:安装路径上不要有中文和空格
如果真机调试程序可以不安装System Image以节省安装时间
运行SDK Manager.exe下载Android开发环境,点击“Install x packages”进行下载安装
选择“Accept License”并点击“Install”进行安装
等待安装进度完成
安装完成,所选项的status变成“Installed”
配置ANDROID_HOME环境变量
在“环境变量”的“用户变量”中新建变量“ANDROID_HOME”,将Android SDK的安装路径设置为变量的值
在“环境变量”的“用户变量”中的Path中追加路径
- %ANDROID_HOME%\tools
-
%ANDROID_HOME%\platform-tools
3.1.2 Flutter中确认Android SDK安装
打开Windows Power Shell执行指令"flutter doctor"
发现已经获得到了Android SDK的版本,但提示一个错误“Android license status unknown”。其指的是“没有接受Android的许可”
执行指令"flutter doctor --android-licenses"
- 如果提示多个确认(y/n),请一直输入“y”至结束
-
如果提示如下图
请输入提示"地址+.bat --update"。
上图输入的就是"D:\Android\android-sdk\tools\bin\sdkmanager.bat --update"
此时会提示选择“y/n”,输入y后回车确认,可能需要等待一小段时间。
重新执行指令:”flutter doctor --android-licenses
应该不会再出现“Android license status unknown”错误
如果问题仍然存在
可能出现根据下图所示可能是移除tools文件夹时出现问题
解决办法
来到路径指向的文件夹,将其中tools更改为tool。
在Windows Power Shell中执行指令“D:\Android\android-sdk\tool\bin\sdkmanager.bat --update”,等待系统生成新的tools文件夹和其中的内容,这可能会花费一段时间。
在Windows Power Shell中重新执行指令flutter doctor --android-licenses
会提示多次选择(y/n)的操作,一律输入"y"
全部确认后,重新执行指令flutter doctor
可以看到错误“Android license status unknown”消失。
3.2 Android Studio
3.2.1 下载和安装Android Studio
访问Android Studio官网下载Android Studio
Android Studio官网下载地址: https://developer.android.google.cn/studio
下载后正常安装即可,安装路径不要有中文和空格。
检查Android SDK配置
点击"Configure"->"Project Defaults"->"Project Structure"
在打开窗口中查看,Android SDK location设置是否正确
依赖检查
打开Windows Power Shell运行“flutter doctor”检查依赖,可以看到Android Studio已经安装,但提示缺少“Flutter”和“Dart”两个plugin(插件)。
3.2.2 下载Flutter和Dart插件
打开“Configure”->"Plugins"
搜索dart,建议先安装dart插件,再安装flutter插件。由于网络不稳定原因,搜索可能会支持一段时间或者提示没有搜索到结果。请耐心多试几次。
也可以通过访问网站下载离线安装包
http://plugins.jetbrains.com/androidstudio
下载离线安装包时请确认好IDE与安装包的版本是否吻合
通过点击“Get Help”中的“About”来确认版本
在网站上选择合适的版本下载(更细致的版本号请忽略)
下载好离线安装包后,通过点击“齿轮”中“Install Plugin from Disk”,选择下载好的zip文件即可安装
检查安装后的插件,确认后重启Android Studio
检查依赖
打开Windows Power Shell,输入“flutter doctor”检查依赖。发现插件错误也解决了。
3.3 创建flutter项目和联机调试
3.3.1 创建flutter项目
安装Dart和Flutter插件后,重启Android Studio看到可以创建Flutter工程
点击“Start a new Flutter project”创建一个Flutter工程
选择工程类型
第一个是App应用
第二个是插件开发
第三个是Widget(组件)开发
第四个是为Android或IOS的APP提供Module
工程名字
选择第一个App应用开发后,点击“Next”,填写工程名字等基本信息
package名字
填写工程名字后,点击“Next”,填写package名字
点击Finish完成创建,进入编辑页面
工程目录结构
main.dart是核心启动文件
3.3.2 联机调试
工具台
真机联调
通过手机连接USB进行调试,首先要确保在Android SDK Manager中安装了“Googel USB Driver”
通过USB连接手机,在手机上的设置中打开“开发者选项”和其中的“USB调试”。等待计算机安装手机驱动后,如果工具台还显示“<no devices>”,请重启Android Sutdio
在Widows Power Shell中执行“flutter doctor”,发现没有问题存在
执行程序
点击“执行”
运行效果
设备连接异常
- 是否为“文件管理”模式
- 是否打开了“开发者选项”
- 是否打开了“USB调试”
- 是否正确的安装了的手机驱动
- 打开cmd,是否能正常执行adb指令,若adb指令提示缺失“api-ms-win-crt-runtimel1-1-0.dll”。在windows7 sp1操作系统中,需要vc环境支持,需要下载vc_redit.exe
https://www.microsoft.com/zh-cn/download/details.aspx?id=48145
gradle异常
运行时如果
Initializing gradle时出现异常
如
"xxxx\gradlew.bat" exited abnormally (xxxx为路径)
根据提示的网址下载zip包并放入异常指向的目录即可
一般目录为:C:\Users\计算机用户名\.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv(可能是其他的序列)
adb.exe已停止工作
在使用真机调试的时候碰到了adb.exe 已经停止工作的错误。由于adb的默认端口5037,被其他程序占用了。
在cmd中输入 netstat -ano|findstr "5037",寻找占用5037端口的PID
在任务管理器中寻找PID为5037的进程,结束进程或卸载相关程序即可。