Flutter学习(零)
Flutter简绍
Flutter是谷歌公司开发的一款开源、免费的UI框架,可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能。目前Flutter已经支持iOS、Android、Web、Windows、macOS、Linux等。
Flutter基于谷歌的dart语言,如果没有任何Dart语言的基础,不建议直接学习Flutter。建议先学习Dart语言的基本语法。然后再进入Flutter的学习。
Flutter在2019年的时候就拥有了非常高的关注度。Flutter目前已经非常稳定,并且社区也非常完善了,应用市场中新发布的新应用有进一半是Flutter开发的应用。lutter3.x 以后不仅支持了Android los App的跨平台开发,还支持了Web、Windows、MacOs.、Liux桌面应用的跨平台开发。全球很多公司都已经在商业项目中使用Flutter,比如Google、微软、阿里、字节、百度、京东等。Flutter在Github Star数已经有150万了,在跨端框架中排名第一。据官方统计截止到2022年6月,已经有超过50万个商业应用程序是用Flutter建立的。Flutter是一个非常值得学习的框架,Flutter不仅具有跨平台、高性能等特点,还具有稳定性的特点,从2018年12月5日发布的Flutter1.0到后面的所有版本用法都是一样的。
Windows上搭建Flutter Android运行环境
安装java的jdk,配置环境变量
安装完成后,再命令行输入java -version
可以看到对应的版本,其实java需要11以上的版本,这里是我之前的java版本,有点低了,可以直接装高版本的,也可以先保留着,后面报错再看怎么解决下载 Android studio,在 Plugins 中下载
Dart
和Flutter
插件
Android studio 这个直接官网下载安装就好了,下载完后,进入软件下载插件,在红框处搜索需要的插件进行下载,下载完后要重新加载窗口下载Fluter SDK
下载完成后是一个压缩包,解压到想解压的位置,然后配置环境变量,吧flutter 的bin目录添加进环境变量添加好后,我们在命令行输入 `flutter --version` 看到版本信息说明好了
Flutter 配置国内镜像
这个主要是由于国内网络的原因,也可以不配配置,配置方法也很简单我们可以在官网文档中看到,把下面两句加入到环境变量中。1
2PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn在进行完上面的配置后,在命令行运行
flutter doctor
会检查开发flutter所需要的环境最后一个是网络问题,不影响我们开发,前面都是对勾,说明环境已经准备好了,可以开始创建flutter项目并进行开发了。
在Android Studio中创建Flutter项目
在安装了Flutter插件后,我们就可以看到下面这个按钮

选择要创建的类型

这里注意我们Flutter SDK 的位置
点击 finish 等一会就创建完成了
点击运行,如果有下面的报错
说明java版本过低,我们要用11以上的版本才可以,一种方案是把环境变量中 JAVA_HOME 修改为对应高版本的,如果电脑中有多个版本的java不想修改环境变量中的JAVA_HOME,我们可以直接改项目中的javahome.
首先,修改android/gradle.properties
,添加org.gradle.java.home

其次,修改 android/app/build.gradle

然后再次点击运行
我们也可以在命令行通过 flutter run
命令来运行项目,我们需要进入项目的目录,并且在电脑上使用虚拟机打开一个手机。通过 flutter devices
可以看我们可以使用的设备


在vscode中开发Flutter
在之前安装配置好flutter后,在vscode中安装flutter相关插件 flutter
和 flutter widget snippets
如果之前没有安装dart的,还需要安装一下 dart
插件


安装好后,我们就可以在vscode中开发Flutter程序了,写完代码,在命令行进行运行就可以。
命令行运行后,我们可以看到还有一些按键操作提示,比如
r
: 热加载R
: 热重启p
:显示网格,这个可以很好的掌握布局情况o
:切换android和ios预览模式q
:退出调试预览模式

mac电脑搭建Flutter 环境
由于没有mac,这一部分就放着吧,这里是bilibili视频教程