参阅书籍:
《Flutter跨平台开发入门与实践》-- 向治洪(著)
《基于Android Studio的案例教程》-- 宋三华(著)
2. Windows系统下搭建开发环境
学习Flutter,推荐使用mac OS系统,因个人是Windows系统的电脑,暂时只进行Android环境的搭建。开发工具可以使用Android Studio或VS Code,这里使用Android Studio,需要先安装配置JDK。
2.1 JDK
2.1.1 下载
在Oracle官网中选择对应版本进行下载。
2.1.2 安装
和安装其他软件类似,双击安装程序,然后基本下一步下一步,直到安装完成。
2.1.3 配置环境变量
需要将JDK的安装路径(例如:C:Program FilesJavajdk-11.0.6bin)配置到环境变量中,然后打开cmd运行窗口,输入“java”,若能看到Java命令的帮助信息,说明JDK环境变量设置成功。
2.2 Android Studio
2.2.1 下载
在官网(https://developer.android.google.cn)中下载。
2.2.2 安装
程序下载完成后,双击安装,单击“Next”按钮,按照默认选项安装即可。
安装完成后,运行Android Studio程序,在弹出的对话框中选择“Do not import settings”单选按钮,单击“OK”按钮。
因为网络问题,Android Studio会提示设置代理服务器,单击“Cancel”按钮。
弹出欢迎界面后,按照默认提示,一路单击“Next”按钮,等SDK下载完成后,单击“Finish”按钮。
2.2.3 配置
安装完成后,进入Android Studio建立/导入项目的界面,先配置Android模拟器。
选择Configure -> SDK Manager,在弹出框中选中需要的Android平台,单击“Apply”按钮,确认后进行下载。
选择Configure -> AVD Manager,在弹出框中单击“ Create Virtual Device...”按钮,进入虚拟机的硬件信息选择界面。
左侧选择Phone,中间选择Pixel 2,单击“Next”按钮,进入AVD对应的硬件产品类型界面。
选择要下载的Android系统镜像文件(例如:Oreo 27),单击Download进行下载,下载完成后单击“Next”按钮,进入设置对应虚拟系统的外观信息界面。
可以设置虚拟机的名称、屏幕显示方式,然后单击“Finish”按钮完成虚拟机的设置。
单击Actions列的三角启动按钮启动虚拟机。
2.3 Flutter
2.3.1 下载
在Flutter官网(https://flutter.dev/docs/get-started/install/windows)进行下载。
2.3.2 配置
将下载的压缩文件解压到某个位置(看作是安装位置),然后将该位置的路径配置到环境变量中。
然后在cmd命令窗口中执行“flutter doctor”命令对环境进行初始化。
然后在Android Studio中安装Flutter和Dart插件。
然后需要把Flutter SDK path和Dart SDK path配置到Android Studio中。
注:
1. 不要将Flutter SDK安装/解压到需要高级权限的路径上,例如C:Program Files或C:Program Files (x86)。
2. 因为网络原因,有时候直接从官方默认地址拉取Flutter项目所需的依赖包会失败,Flutter官网为中国开发者搭建了临时镜像,可以在用户变量中进行添加。
FLUTTER_STORAGE_BASE_URL表示Flutter SDK的初始化地址,PUB_HOSTED_URL表示pub包下载的地址。
官方默认地址:
FLUTTER_STORAGE_BASE_URL=https://storage.googleapis.com
PUB_HOSTED_URL=https://pub.dartlang.org
2.4 创建第一个Flutter项目
选择file -> New -> New Flutter Project...,进入创建项目界面。
选择Flutter Application,单击“Next”按钮,进入项目配置界面。
可以修改项目名称、项目放置位置、项目描述,然后单击“Next”按钮,进入包名设置界面。
修改包名后,单击“Finish”按钮,项目创建完成。
单击运行按钮,在模拟器中可以看到运行的项目。
2.5 项目结构
在Flutter应用开发中,图片、静态配置和资源都可以放在assets目录下。
2.6 热重载
Flutter的热重载功能可以帮助开发者在不重新启动应用的情况下,快速地构建用户界面、添加功能以及修复漏洞。
在Flutter的热重载操作中,通过将更新后的源代码注入正在运行的Dart虚拟机即可实现热重载。在虚拟机使用新的字段和函数更新类后,Flutter框架会自动重新构建应用的Widget树,并刷新效果。
2.7 运行模式
Flutter一共提供了3种运行模式,分别是Debug、Release和Profile模式。
Debug模式又叫调试模式,主要用于软件编写过程中,可以同时在物理设备、仿真器或模拟器上运行。默认情况下,使用flutter run命令运行程序时就是使用的Debug模式。
Release模式又叫发布模式,主要用在应用发布过程中,只能在物理设备上运行,不能在模拟器上运行。使用flutter run--release命令运行程序时就是使用的Release模式。
Profile模式又叫分析模式,主要用于应用性能分析,只能在物理设备上运行,不能在模拟器上运行。
2.8 Flutter常用命令
1)创建项目:
代码语言:javascript复制flutter create <项目名称>
2)查看本地版本:
代码语言:javascript复制flutter channel
3)切换版本:
代码语言:javascript复制flutter channel <版本名称>
4)开启Flutter对桌面和Web的支持:
代码语言:javascript复制flutter config --enable-windows-desktop
5)升级Flutter SDK和依赖包:
代码语言:javascript复制flutter upgrade
6)只升级依赖包:
代码语言:javascript复制flutter packages get
flutter packages upgrade
2.9 Flutter包管理
一个完整的应用往往会依赖很多的第三方包。在原生Android开发中,通常使用Gradle来管理依赖包,在iOS中则使用Cocoapods或Carthage来管理依赖包。对于Flutter,可以使用配置文件pubspec.yaml来管理第三方依赖包。
pubspec.yaml支持多种方式的插件依赖,如常见的Pub依赖,Git依赖和本地依赖。
在pubspec.yaml配置的dependencies节点中添加需要依赖的第三方插件,在命令行中输入flutter packages get命令即可下载依赖的插件。
2.10 安装配置VS Code
除了Android Studio外,VS Code也是官方推荐的一款可视化Flutter开发工具。
2.10.1 安装
在官网(https://code.visualstudio.com/Download)中下载对应安装包,和安装其他软件类似,基本下一步下一步,直到安装完成。
2.10.2 安装Flutter和Dart插件
点击左侧的
(Extensions)按钮,搜索Flutter和Dart进行安装。
2.10.3 创建一个Flutter项目
选择 View -> Command Palette... ,在弹出框中选择Flutter: New Application Project。
然后选择放置项目的目录。
最后在弹出框中修改项目名称,按回车创建项目。
2.10.4 运行项目
运行前需打开模拟器。
可以在终端输入flutter run命令运行项目。
修改main.dart中的代码,保存后,在终端输入r,实现热重载。