《Flutter》-- 2.Windows系统下搭建开发环境

2022-04-07 16:19:53 浏览数 (1)

参阅书籍:

《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,实现热重载。

0 人点赞