跨平台解决方案发展历史：
- webview：最早出现的跨平台解决方案。基于JavaScript和WebView。主要通过HTML来构建自己的界面，再讲其显示在各个平台的WebView当中。性能相对较差。
- React Native : 是Facebook最早开元的JS框架React在原生移动平台衍生的产物，使用JS语言以及CSS来开发移动应用。在保留基本渲染能力的基础上，用原生自带的UI组件实现核心的渲染引擎，保证了良好的渲染性能。但是由于RN的本质是通过js VM调用原生接口，通信效率相对较低。而且框架本省不负责渲染，而是间接通过原生进行渲染的。
- Flutter：利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生控件。性能基本与原生相同。
1. Flutter 环境配置
官方文档：安装和配置 Flutter 开发环境
这里不做赘述，网上有也有很多教程。
ps：之前我这边出现过一个问题，我用的开发工具是VSCode 我想跑在Xcode模拟器上，第一天项目好好的，正常运行，结果第二天就一直连不上，提示超过60s，一直连接不到，最后用终端命令 flutter doctor 检测，提示Xcode版本号不符合，需要更新。
2. 创建Flutter项目
创建Flutter项目有两种方式：通过命令行创建和 通过开发工具创建，注意项目名称不能带特殊符号，切不能大写。
2.1 通过命令行创建
flutter create firstdemo
注意： 文件名必须是全部小写
2.2 通过开发工具创建
- 打开 View > Command Palette。
- 输入 “flutter”，选择 Flutter: New Application Project。
- 创建或者选择新项目的父文件夹。
- 输入项目名称，比如 myapp，然后点 Enter
- 稍等一下项目创建成功，目录中就会生成 main.dart 文件。
官方文档：https://flutter.cn/docs/get-started/test-drive?tab=vscode
项目目录简介：
android: 安卓平台相关代码
iOS ： iOS平台相关代码
lib：flutter相关代码，我们主要编写代码的文件
test：用于存放测试代码
pubspec.yaml : 项目配置文件，配置项目名称、项目描述、项目所需依赖等。
main.dart：它是我们Flutter启动的入口文件，里面有main函数；
3. Hello World
上面也提到main.dart是Flutter启动的入口文件，首先先删除里面的内容。然后编写 Hello World代码
3.1 编写 Hello World 代码
import 'package:flutter/material.dart';
void main() {
runApp(Text(
'Hello World',
textDirection: TextDirection.ltr,
));
}
这样页面上就显示出了 Hello World，但是没有居中，字体也有点小；
3.2. 代码分析
main：Flutter启动的入口文件
runApp : 是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的
Text ： 为Flutter的部件，继承自StatelessWidget，StatelessWidget继承自Widgetl。
3. Hello World 显示优化（体验）
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.red,
),
body: Center(
child: Text(
'hello world',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40, color: Colors.red, fontWeight: FontWeight.bold),
),
),
),
));
}
MaterialApp: 即为app的通用设计风格，这意味着整个应用我们都会采用MaterialApp风格的一些东西，其中的很多内置Widget，方便我们对应用的设计，并且目前我们使用了其中两个属性：
title：显示的标题
home：是该应用启动时显示的页面，我们传入了一个Scaffold
Scaffold: 脚手架，脚手架的作用就是搭建页面的基本结构；可以理解为iOS中的 UIViewController
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
Scaffold也有一些属性，比如appBar和body；
appBar是用于设计导航栏的，我们传入了一个title属性；
body是页面的内容部分
material是什么？
material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
在Flutter中高度集成了Material风格的Widget；
在我们的应用中，我们可以直接使用这些Widget来创建我们的应用
