认识 Flutter 是什么
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
学习一个框架,老样子,看文档:Flutter 中文网 / Flutter 英文官网
Flutter 生态情况
-
showcase:https://flutter.dev/showcase
-
Windows 价格亲民,但无法开发 iOS;
-
Mac 价格较高,能同时开发 iOS 和 Android;
Flutter 开发环境搭建 windows 版
不会科学上网是装不成的!!
- 安装 Java 环境:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html;
- 我这里下载的是 Java 8:
- 点击安装完成之后,右击"我的电脑",点击"属性",选择"高级系统设置";
- 选择"高级"选项卡,点击"环境变量";
- 在 “系统变量” 中设置 2 项属性,JAVA_HOME、CLASSPATH(大小写无所谓),点击"新建";
注意:如果使用 1.5 以上版本的 JDK,不用设置 CLASSPATH 环境变量,也可以正常编译和运行 Java 程序。
- 在“用户变量”中新建一个“PATH”变量名,变量值为:%JAVA_HOME%\bin;(就是jdk的bin目录,记得后面有“;”号哦)
- 以上三步完成后,点击“环境变量”的“确定”之后使用快捷键“Ctrl+R”拉起“cmd”命令行依次输入
java -version
、java
、javac
,如果出现以下信息,就说明配置成功了,若还是不行,只能重复上述操作,再重新配置一次:
- 快捷键 win + R 打开 cmd 命令行,输入 java,若如下图显示,则安装成功:
- 下载安装 FlutterSDK:https://flutter.io/sdk-archive/#windows
- 下载后将压缩包解压,找到下图文件,双击打开:
会得到下图界面:
输入flutter -h
:
这一步有 VPN 有时候可能也不大行,这时候可以考虑用国内镜像:
步骤:
- 计算机->属性->高级系统设置->环境变量,在用户变量下添加下面两个:
① PUB_HOSTED_URL:https://pub.flutter-io.cn
② FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn- 重启电脑;
- 将 flutter SDK -> bin 目录 -> cache 清空;
- win + R 输入 cmd 打开命令行,再次输入
flutter -h
;- 如果第四步不行就 win + R 输入 cmd 打开命令行,输入
flutter doctor
,据说会自动升级(没试过
- 配置路径:
新建一个路径,将 flutter 文件夹中 bin 文件夹的路径复制过去即可,最后 win + R 打开 cmd 命令行,输入flutter -h
,若跟刚才显示一致,则配置成功;
- win + R 打开 cmd 命令行,输入
flutter doctor
,诊断环境配置好了没有,通常有×
则不能正常运行:
- 下载安装 Android Studio;
具体步骤可以参考菜鸟教程;
-
在 Android Studio 上安装 flutter 插件:
安装好之后重启,会发现多了一行(如下图):
-
这时,再 win + R 打开 cmd 命令行,输入
flutter doctor
:
可见提示我们证书没有安装,并给了我们安装证书的命令行,我们跟着输入flutter doctor --android-licenses
即可:
安装时它会问你许多问题,全部y
就可了; -
这个时候再次输入
flutter doctor
,会发现剩下最后一个感叹号点:
原因是还未安装虚拟机; -
下一步,我们先构建一个 flutter 项目:
然后我就直接卡住了,我也不知道为什么,于是我决定 win + R 打开 cmd 命令行,输入flutter create 项目名
:
然后进入 Android Studio 手动打开项目:
然后刚刚这一步太慢了,我去给我的用户变量添加两个代理网址:
FLUTTER_STORAGE_BASE_URL
:https://storage.flutter-io.cn
PUB_HOSTED_URL
:https://pub.flutter-io.cn
然后感觉速度不太行,又科学上网了一波,终于可以了!
-
下一步就是安装 AVD 虚拟机:
点击最新的版本进行下载:
下载完成后点击运行:
第一次打开虚拟机的时候可能会弹出来:
解决方法:往往报错是因为SDK没有被选中。
点击 【File】-【Project Structure】-【Project SDK】,正确填写SDK路径。
打开虚拟机后,在终端输入 flutter doctor:
会发现所有勾都打上啦! -
打开虚拟机后,点击 Debug:
然后我失败了:
查了一下好像是因为 gradle 版本过低,我去更新一下试试:
然后整了一波之后,大概意思是,支持的最低版本至少要到 gradle 6.5,然后我又跑去倒腾了:
一看 gradle 官网,发现版本又高又稳定的就是 6.7.1 了,就它了,一顿下载之后,找到了电脑里面的 gradle 文件夹,路径大概是:C:\Users\86135.gradle\wrapper\dists,每个人都差不多,大家可以参考一下
大概是有这么多个版本,不过前面那些都是之前自动下载的,我还没有自己手动装过,每个版本的 gradle 文件目录下都有一个固定的乱码目录:
这个乱码的提取源码在下面:
大家修改自己想安装的版本来获取就可以了:
package com.java.test1;
import java.math.BigInteger;
import java.security.MessageDigest;
public class Test1 {
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println(getHash("https://services.gradle.org/distributions/gradle-6.7.1-all.zip"));
// System.out.println(getHash("https://services.gradle.org/distributions/gradle-3.2-all.zip"));
}
private static String getHash(String string) {
try {
MessageDigest messageDigest = MessageDigest.getInstance("MD5");
byte[] bytes = string.getBytes();
messageDigest.update(bytes);
return new BigInteger(1, messageDigest.digest()).toString(36);
} catch (Exception e) {
throw new RuntimeException("Could not hash input string.", e);
}
}
}
然后再把这里改一下:
这个时候我点击 Debug 也不行,但是重启后就好了!
在 VSCode 下编写 Flutter 代码
首先,打开我们的 VSCode,下载 Flutter 和 Dart 插件;
然后,我们在桌面建一个名为 EmulatorRun.bat 文件,右键编辑,找到自己电脑中 emulator.exe 的路径与虚拟机的名字,并设置延时与速度:
填写后 Ctrl + S 保存,关掉后,右键以管理员身份运行,即可直接运行虚拟机:
接下来,保持虚拟机开启的状态,我们回到 VSCode,Ctrl + Shift + ~
打开终端,输入 flutter run
:
还有一个更为简便的打开虚拟机的方式:
如图所示,点击 VSCode 右下角的【No Device】,选择或新建虚拟机即可:
第一个 Hello World 程序
把 main.dart 文件中的代码都删掉,我们重新自己编写:
//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的
void main() {
runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
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'),
),
),
);
}
}
然后在终端输入flutter run
运行:
可以看到运行成功,我们要注意红框内的快捷键;
Flutter 更新
未来如过 Flutter 出了更新版本,可以在终端直接输入 flutter upgrade
进行更新即可;
但是一般更新完成之后,直接跑 flutter run
是会报错运行不了的,所以要先 flutter clean
一下,再 flutter run
;
Flutter 项目文件结构
如何归档图片资源以及处理不同分辨率?
如何归档 strings 资源以及处理不同语言?
如何添加 Flutter 项目所需的依赖?
详情见 Pub 官网;
谁是 Flutter 中 View?
如何更新 Widgets?
如何在布局中添加或删除组件?
如何对 Widget 做动画?
???
如何绘图(Canvas draw/paint)?
绘制圆形和方形
如何构建自定义 Widgets?