1. Flutter 开发初识 Hello World

跨平台解决方案发展历史：

1. webview：最早出现的跨平台解决方案。基于JavaScript和WebView。主要通过HTML来构建自己的界面，再讲其显示在各个平台的WebView当中。性能相对较差。
2. React Native : 是Facebook最早开元的JS框架React在原生移动平台衍生的产物，使用JS语言以及CSS来开发移动应用。在保留基本渲染能力的基础上，用原生自带的UI组件实现核心的渲染引擎，保证了良好的渲染性能。但是由于RN的本质是通过js VM调用原生接口，通信效率相对较低。而且框架本省不负责渲染，而是间接通过原生进行渲染的。
3. Flutter：利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生控件。性能基本与原生相同。

1. Flutter 环境配置

官方文档：安装和配置 Flutter 开发环境
这里不做赘述，网上有也有很多教程。

ps：之前我这边出现过一个问题，我用的开发工具是VSCode 我想跑在Xcode模拟器上，第一天项目好好的，正常运行，结果第二天就一直连不上，提示超过60s，一直连接不到，最后用终端命令 flutter doctor 检测，提示Xcode版本号不符合，需要更新。

2. 创建Flutter项目

创建Flutter项目有两种方式：通过命令行创建和 通过开发工具创建，注意项目名称不能带特殊符号，切不能大写。

2.1 通过命令行创建

flutter create firstdemo

注意： 文件名必须是全部小写

2.2 通过开发工具创建

1. 打开 View > Command Palette。
2. 输入 “flutter”，选择 Flutter: New Application Project。
3. 创建或者选择新项目的父文件夹。
4. 输入项目名称，比如 myapp，然后点 Enter
5. 稍等一下项目创建成功，目录中就会生成 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),
        ),
      ),
    ),
  ));
}

helloworld.png

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来创建我们的应用