flutter入门-环境搭建
Flutter概述
Flutter是什么
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面,Flutter可以跟现有的代码一起工作,并且可以被世界各地开发者使用,因为他是免费的、开源的!参考flutter中文网
Flutter的特点
- Fast development(快速开发)
Flutter的热加载可以帮助你快速简单的尝试,构建UI,添加功能或者快速的修复BUG。你可以在任何具备IOS或Android的硬件的模拟器上体验不要一秒的重载时间,并且不会丢失任何状态!
- Expressive, beautiful UIs(漂亮的UI)
你的用户会感到高兴,因为Flutter内置的Material Design设计和Cupertino (iOS-flavor)控件,拥有丰富的api,能平滑滚动,并能保留了平台的特性
- Modern, reactive framework(时髦而高效)
Flutter是个时髦而高效的UI框架,它有丰富的平台特性,布局,基础控件。它的2D,动画,手势,感应等强大的API,灵活使用,能解决你头疼的UI问题!
- Unified app development(统一app环境)
Flutter 的工具和库,可以帮助你在IOS和Android上轻松实现生活上的想法。如果你没有任何移动开发经验,你可以学习Flutter来简单、快捷的构建漂亮的移动端应用程序。如果你是一个有经验的iOS和Android开发人员,您可以使用Flutter利用你现有的代码(Java,ObJC、Swift)进行开发!
环境搭建
环境要求
-
操作系统: Windows 7 或更高版本 (64-bit)
-
磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
-
工具: Flutter 依赖下面这些命令行工具
-
Git for Windows (Git命令行工具)
如果已安装Git for Windows,请确保命令提示符或PowerShell中运行
git
命令,不然在后面运行flutter doctor
时将出现Unable to find git in your PATH
错误, 此时需要手动添加C:\Program Files\Git\bin
至Path
系统环境变量中。
-
获取Flutter 的 SDK
- 去flutter官网下载其最新可用的安装包,点击下载 ;
注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在*地区,要想正常获取安装包列表或下载安装包,可能需要*,读者也可以去Flutter github项目下去下载安装包
- 将安装包zip解压到你想安装Flutter SDK的路径(如:
D:\work\flutter
;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\
) - 在Flutter安装目录的
flutter
文件下找到flutter_console.bat
,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了
注意: 由于一些flutter
命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。 所以我们需要配置用户环境变量:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
这两项是google为国内开发者搭建的临时镜像
- 更新环境变量
要在终端运行 flutter
命令, 你需要添加以下环境变量到系统PATH
运行 flutter doctor
打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:
flutter doctor
该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务**(以粗体显示)**
例如:
[-] 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
输出中, 如果你选择使用IDE,我们提供了,IntelliJ IDEA,Android Studio和VS Code的插件
一旦你安装了任何缺失的依赖,再次运行flutter doctor
命令来验证你是否已经正确地设置了
Android Studio安装插件
需要安装两个插件:
-
Flutter
插件: 支持Flutter开发工作流 (运行、调试、热重载等) -
Dart
插件: 提供代码分析 (输入代码时进行验证、代码补全等)
步骤:
- 启动Android Studio.
- 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
- 选择 Browse repositories…, 选择 Flutter 插件并点击
install
. - 重启Android Studio后插件生效
验证是否安装成功:
安装成功之后,在创建项目的时候会有一项,new flutter project
VsCode安装插件
需要安装两个插件:
-
Flutter
插件: 支持Flutter开发工作流 (运行、调试、热重载等) -
Dart
插件: 提供代码分析 (输入代码时进行验证、代码补全等)
步骤:
- 启动 VsCode
- 左侧找到插件下载项
- 输入flutter和dart
- 点击安装
- 重启VsCode
验证是否安装成功:
按住 Ctrl + Shift + p
,在弹出框里面输入 doctor,如下图确定正常安装:
运行第一个Flutter项目
-
输入命令或者利用 vscode的命令工具
- 命令: flutter create my_flutter_pro 当输入完这个命令,会在当前文件夹内创建 my_flutter_pro 的项目
- 利用vscode命令工具: ctrl + shift + p ,在弹出框里面输入,flutter,选择 flutter create 这一项
-
编译发布flutter项目到移动端
- 在项目的 lib/main.dart 目录下,按下F5键(需要 保证vsCode 连上了设备,可以看vsCode右下角),这样会自动编译进行发布;这种方式支持热修复
- 在flutter 根目录下输入 flutter run 也可以运行发布;这种方式不支持 热修复
-
热修复
lutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改
环境一些其他注意项
Android的SDK安装
flutter项目运行要依赖Android的SDK,所以需要进行下载安装,我在素材中已经提供,直接拷贝到你们自己的文件夹中即可;
flutter项目运行的注意
flutter项目运行要依赖adb,并且是1.0.39版本之后的才可以,我在素材中提供了,只需要把 platform-tools_r28.0.0-windows 里面的文件拷贝到你的Android sdk 根目录下 platform-tools 即可,覆盖之前的(覆盖的时候可能会遇上,说文件被打开使用,不能覆盖,此时打开终端,输入 adb kill-server 杀掉adb进程,然后点击继续覆盖即可)
在构建Flutter项目注意项
在build 构建的时候,默认不能有中文目录,否则会编译失败,但是如果你的目录中包含了中文,可以进行忽略,打开 项目根目录的 android/gradle.properties 文件, 添加 android.overridePathCheck=true
即可
运行的机器
- 可以运行真机, 真机的话需要连上电脑,然后打开手机中的 开发者选项 -> 开打USB调试;然后就可以开始运行项目了
- 可以使用模拟器, 雷电模拟器