Flutter 1.9 稳定版发布:跨平台开发的未来?
9月11日,在上海举办的谷歌开发者大会“Google Developer Days”上,谷歌Flutter团队宣布正式推出Flutter 1.9稳定版。这是Flutter迄今为止最大的一次版本更新,100余位贡献者提交了超过1500份pull request。团队还在会上宣布了另一个具有里程碑意义的重磅消息:Flutter web支持现已成功合并到Flutter的主repo。自此以后,开发者只需使用同一套基准代码,便可为移动平台、桌面端和网页端开发应用。
那么,跨平台、高性能的Flutter是否将一统江湖?不管如何,Flutter入门的第一步——搭建开发环境,史上最详细保姆级教程来了。
Flutter开发环境搭建
Flutter开发环境的搭建比较繁琐,任何一个步骤失败都会导致最终环境搭建不能完成。Flutter支持三种环境:Windows、MacOS和Linux。这里我们主要讲解Windows及MacOS的环境搭建。
Windows环境搭建
1. 使用镜像
首先解决网络问题。环境搭建过程中需要下载很多资源文件,当某个资源未及时更新时,就可能报各种错误。在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,可以将如下环境变量加入用户环境变量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
注意:以上镜像为临时镜像,并不能保证一直可用,读者可以参考Using Flutter in China以获得有关镜像服务器的最新动态。
2. 安装Git
Flutter依赖的命令行工具为Git for Windows(Git命令行工具)。Windows版本的下载地址为Git官网。
3. 下载安装Flutter SDK
在Flutter官网下载最新可用的安装包。
注意:Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想获取安装包列表或下载安装包有可能发生困难,读者也可以去Flutter GitHub项目下去下载安装Release包。
Flutter官网下载地址:Flutter SDK Archive。
Flutter GitHub下载地址:Flutter Releases。
将安装包解压到想安装Flutter SDK的路径(如D:\Flutter)。在Flutter安装目录的Flutter文件下找到flutter_console.bat
,双击运行该文件并启动Flutter命令行,接下来就可以在Flutter命令行运行flutter
命令了。
不要将Flutter安装到需要一些高权限的路径,如C:\Program Files\
。
4. 添加环境变量
不管使用什么工具,如果想在系统的任意地方能够运行这个工具的命令,则需要添加工具的路径到系统路径中。这里路径指向Flutter文件的bin路径。同时,要检查是否有名为“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也需要添加这两个条目。重启Windows才能使更改生效。
5. 运行flutter命令安装各种依赖
使用Windows命令窗口运行以下命令,查看是否需要安装依赖项来完成安装:
flutter doctor
该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经捆绑在Flutter里了,没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。
6. 编辑器设置
如果使用Flutter命令行工具,可以使用任何编辑器来开发Flutter应用程序。输入flutter help
命令,在提示符下查看可用的工具。但是笔者建议最好安装一款功能强大的IDE来进行开发,这样开发效率会更高。由于Windows环境只能开发Flutter的Android应用,所以接下来我们会重点介绍Android Studio这款IDE。
(1)安装Android Studio
要为Android开发Flutter应用,可以使用Mac或Windows操作系统。Flutter需要安装和配置Android Studio,步骤如下:
- 下载并安装Android Studio:Android Studio官网。
- 启动Android Studio,然后执行“Android Studio安装向导”,将安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具,这是为Android开发Flutter应用时所必需的。
(2)设置你的Android设备
要准备在Android设备上运行并测试你的Flutter应用,需要安装Android 4.1(API level 16)或更高版本的Android设备。步骤如下:
- 在你的设备上启用“开发人员选项”和“USB调试”,这些选项通常在设备的“设置”界面里。
- 使用USB线将手机与计算机连接。如果你的设备出现提示,请授权计算机访问你的设备。
- 在终端中,运行
flutter devices
命令以验证Flutter识别出你连接的Android设备。 - 用
flutter run
命令启动你的应用程序。
(3)设置Android模拟器
要准备在Android模拟器上运行并测试Flutter应用,请按照以下步骤操作:
- 启动Android Studio→Tools→Android→AVD Manager并选择Create Virtual Device,打开虚拟设备面板。
- 选择一个设备并点击Next按钮。
- 选择一个镜像,点击Download即可,然后点击Next按钮。
- 验证配置信息,填写虚拟设备名称,选择Hardware-GLES 2.0以启用硬件加速,点击Finish按钮。
- 在工具栏选择刚刚添加的模拟器。
- 也可以在命令行窗口运行
flutter run
命令启动模拟器。
(4)安装Flutter和Dart插件
IDE需要安装两个插件:
- Flutter插件:支持Flutter开发工作流(运行、调试、热重载等)。
- Dart插件:提供代码分析(输入代码时进行验证、代码补全等)。
打开Android Studio的系统设置面板,找到Plugins并分别搜索Flutter和Dart,点击安装即可。
MacOS环境搭建
1. 命令行工具
Flutter依赖的命令行工具有bash、mkdir、rm、git、curl、unzip、which。
2. 下载并安装Flutter SDK
请按以下步骤下载并安装Flutter SDK:
- 在Flutter官网下载其最新可用的安装包。
- 解压安装包到想安装的目录,例如:
cd /Users/ksj/Desktop/flutter/
unzip /Users/ksj/Desktop/flutter/v0.11.9.zip.zip
- 添加Flutter相关工具到path中:
export PATH=`pwd`/flutter/bin:$PATH
3. 运行Flutter命令安装各种依赖
运行以下命令查看是否需要安装其他依赖项:
flutter doctor
该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经捆绑在Flutter里了,没有必要单独安装Dart。仔细检查命令行输出,这里可能需要安装其他软件或进一步需要执行的任务。
4. 添加环境变量
使用vim命令打开~/.bash_profile
文件,添加如下内容:
export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/ksj/Desktop/flutter/flutter/bin:$PATH
注意:请将PATH=/Users/ksj/Desktop/flutter/flutter/bin
更改为你的路径。
设置好环境变量以后,务必运行source $HOME/.bash_profile
命令刷新当前终端窗口,以使刚刚配置的内容生效。
5. 编辑器设置
MacOS环境既能开发Android应用,也能开发iOS应用,Android设置请参考Windows环境搭建中的“安装Android Studio”部分。Xcode可用于开发iOS应用,接下来我们介绍Xcode的使用方法。
(1)安装Xcode
安装最新版本的Xcode。可通过链接下载Xcode官网,或通过苹果应用商店下载。
(2)设置iOS模拟器
要准备在iOS模拟器上运行并测试你的Flutter应用。要打开一个模拟器,在MacOS的终端输入以下命令:
open -a Simulator
该命令可以找到并打开默认模拟器。如果想切换模拟器,可以选择Hardware → Device,再选择一个模拟器。
(3)安装到iOS设备
要在苹果真机上测试Flutter应用,需要有一个苹果开发者账户,还需要在Xcode中进行设置。
- 安装Homebrew工具。Homebrew是一款MacOS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能,下载地址为Homebrew官网。
- 打开终端并运行一些命令,安装工具,用于将Flutter应用安装到iOS设备上,命令如下所示:
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
注意:如果这些命令中有任何一个失败并出现错误,请运行brew doctor
命令并按照说明解决问题。
接下来需要设置Xcode签名,步骤如下:
- 在Flutter项目目录中通过双击
ios/Runner.xcworkspace
打开默认的Xcode工程。 - 在Xcode中,选择导航左侧面板中的Runner项目。
- 在Runner target设置页面中,确保在General→Signing→Team(常规→签名→团队)下选择了你的开发团队。
- 如果你要开始第一个iOS开发项目,可能需要使用你的Apple ID登录Xcode。
- 当你第一次添加真机设备进行iOS开发时,需要设置同时信任你的Mac和该设备上的开发证书。
- 如果Xcode中的自动签名失败,请查看项目的Bundle Identifier值是否唯一。
- 使用
flutter run
命令运行应用程序。
使用Appuploader简化iOS应用发布流程
在iOS开发中,应用的发布流程通常较为复杂,尤其是涉及到证书管理、配置文件生成、应用打包和上传等步骤。为了简化这一流程,开发者可以使用Appuploader,这是一款专为iOS开发者设计的工具,能够帮助开发者快速生成证书、管理配置文件,并轻松上传应用到App Store。
Appuploader的主要功能
- 证书管理:自动生成和管理开发证书、发布证书,避免手动操作的繁琐。
- 配置文件生成:自动生成并管理开发环境和发布环境的配置文件。
- 应用打包:支持一键打包应用,生成符合App Store要求的IPA文件。
- 应用上传:支持直接将应用上传到App Store,简化上传流程。
如何使用Appuploader
- 下载并安装Appuploader:访问Appuploader官网下载并安装工具。
- 登录Apple开发者账号:在Appuploader中登录你的Apple开发者账号。
- 生成证书和配置文件:根据提示,选择需要生成的证书类型和配置文件类型,Appuploader会自动为你生成并管理这些文件。
- 打包应用:在Xcode中完成开发后,使用Appuploader一键打包应用,生成IPA文件。
- 上传应用:使用Appuploader将生成的IPA文件直接上传到App Store,完成应用的发布流程。
通过使用Appuploader,开发者可以大大简化iOS应用的发布流程,节省大量时间和精力。
写第一个Flutter程序
万事开头难,让我们开始写第一个简单的Flutter程序,具体步骤如下。
步骤1:新建一个Flutter工程
选择Flutter Application,点击Next按钮,打开应用配置界面,在Project name中填写helloworld
,Flutter SDK path使用默认值,IDE会根据SDK安装路径自动填写,Project location填写为工程放置的目录,在Description中填写项目描述,任意字符即可。
步骤2:配置Flutter工程
点击Next按钮,打开包设置界面,在Company domain中填写域名,注意域名要反过来写,这样可以保证全球唯一,Platform channel language下面的两个选项不需要选中。
步骤3:创建工程
点击Finish按钮开始创建第一个工程,等待几分钟,会创建示例工程。
步骤4:运行示例程序
工程创建好后,可以先运行一下官方创建的示例,看一看运行效果,点击Open iOS Simulator打开iOS模拟器。
步骤5:编写Hello World程序
接下来我们打开工程目录下的main.dart
文件,清空main.dart
代码,把Hello World代码粘贴至main.dart
文件,完整代码如下所示:
class MyApp extends StatelessWidget { Widget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter'),),body: Center(child: Text('Hello World'),),),);}
}
步骤6:运行程序
重新运行此程序,标题栏显示Welcome to Flutter
,页面中间显示Hello World
。这样,第一个Flutter程序就运行出来啦。
总结
Flutter 1.9的发布标志着跨平台开发的进一步成熟,尤其是Flutter web的支持,使得开发者能够使用同一套代码为移动端、桌面端和网页端开发应用。通过本文的详细教程,你可以轻松搭建Flutter开发环境,并编写你的第一个Flutter程序。同时,借助Appuploader,iOS应用的发布流程也将变得更加简单高效。