认识 Flutter 是什么

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

学习一个框架，老样子，看文档：Flutter 中文网 / Flutter 英文官网

Flutter 生态情况

github 地址：https://github.com/Solido/awesome-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'),
        ),
      ),
    );
  }
}