Flutter入门
Flutter 安装
推荐安装方式：下载 Github 上 Flutter 仓库，运行 bin 目录下的 flutter 脚本
flutter doctor
环境配置与安装依赖
Flutter 应用的编译调试，依赖 JDK、Andorid SDK 以及很多依赖包，需要安装 JDK 并配置相关环境变量。
- JAVA_HOME = C:\Program Files\Java\jdk1.8.0_191
- FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
- PUB_HOSTED_URL = https://pub.flutter-io.cn
即使准备用 VSCode 开发，也建议安装 Android Studio，因为安装过程会自动安装很多必需的依赖。
Flutter 文档
安装 Android Studio 插件
VSCode 中 Flutter 插件
Flutter 项目结构
可以使用 Flutter 插件创建新项目，也可以直接打开 flutter 仓库中的 examples 目录，里面内置了多个项目。
以 examples/api 为例
目录结构说明
- lib Flutter 源码位置
- pubspec.yaml 项目配置文件，类似前端的 package.json
- assets 资源目录，存放图片、字体文件等
- android 安卓平台相关代码文件
- ios 苹果移动端相关代码
- linux linux 端相关代码
- macos 苹果电脑端相关代码
- web 浏览器端相关代码
- windows windows 端相关代码
一般项目只存在 android 和 ios 两个平台对应的目录
android 目录文件
ios 目录文件
Flutter 混合开发
Flutter 新建项目，本身就可以认为是混合开发的，项目中本身就包含了 android 平台和 ios 平台相关代码。
登录、消息推送等逻辑，也必须用原生代码写。
Flutter 提供了与原生通信的方法，也提供了 FlutterActivity 和 FlutterViewController 给原生用于嵌入 Flutter 页面。
还可以将 Flutter 项目编译为模块，比如 Android 平台打包成 AAR 文件，嵌入到已有的原生代码仓库中，渐进式迁移。
Flutter 与平台通信
Flutter 架构概览
Flutter 架构概览
- 框架层 与用户代码交互，对应仓库 https://github.com/flutter/flutter
- 引擎层 Flutter 的核心，C++ 实现，对应仓库 https://github.com/flutter/engine
- 嵌入层 适合平台的语言编写，负责与底层系统协调
在每一个平台上，会包含一个特定的嵌入层，该嵌入层采用了适合当前平台的语言编写。
例如 Android 使用的是 Java 和 C++
iOS 和 macOS 使用的是 Objective-C 和 Objective-C++
Windows 和 Linux 使用的是 C++。
Skia
Skia 是谷歌开源的 2D 渲染引擎，用于 Chrome 浏览器，ChromeOS，Android 和 Flutter。
Skia 是比 OpenGL 和 Vulkan 更上层的 API。
由于 Flutter 在 Android 和 iOS 都使用 Skia 作为渲染引擎，可以保证界面渲染完全可控。
与 ReactNative 相比，不需要把 UI 的渲染交给原生系统。
Widget
Widget 类似 React 中的 Component，是 Flutter 应用界面的基础组成单位。每个 Widget 都提供 build 方法，类似 React 中的 render 方法。
flutter 源码内置了大量的 Widget 供使用，比如 Container、Row、Column、Text、Image、Router 等。
StatefulWidget 和 StatelessWidget
有状态组件和无状态组件，和 React 类似。使用 stf 或 stl 可以快速输入代码片段
StatefulWidget
StatefulWidget 通过 setState 修改状态，一旦状态发生变化，就会触发 build 方法，重新构建界面。
Material 和 Cupertino
分别是 Android 风格和 iOS 风格的组件，提供了更多平台风格的、功能更多的 Widget。
Material 和 Cupertino UI 都是 flutter 源码中自带的，Material 是默认启用的。
import 'package:flutter/material.dart';
Material
Cupertino
Flutter gallery
通用布局
- Container 向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。
- GridView 将 widget 展示为一个可滚动的网格。
- ListView 将 widget 展示为一个可滚动的列表。
- Stack 将 widget 覆盖在另一个的上面。
Flutter 中的布局与 Web 布局差异很大，子组件的布局收父组件的限制，并不是自己设置为多大就能有多大。
Flutter 路由导航
Flutter 通过 Navigator 实现路由导航，类似 React 中的 history，通过 Navigator.push 导航到新路由，Navigator.pop 返回。
Flutter 路由导航
类似 React 的 Switch Route 设置
package 和 plugin
插件 (plugin) 是 package 的一种，是特别的 package，特指那些有关获得原生平台特性的 package。
- 纯 Dart 插件
- 原生插件
在 pubspec.yaml 中指定 package 支持的平台。
项目中包含 android 、ios 等平台的相关代码，用对应的 kotlin、swift 编写。
联合插件
将对不同平台的支持分为单独的软件包，然后用一个总包来联合
