学习网站：https://flutter.cn/
Flutter 介绍
语言特性
Flutter 采用的是 Google 的Dart 语言进行开发和学习，Dart 语言从Dart2 开始便是我们的强类型的语言，而且是静态类型的语言机制吧
以及Dart语言是面向对象的开发模式OOP，核心的话对于我们的 Kotilin 和 Java 的开发同学上手起来就十分的方便了，核心对于有 Android 或者说 Java server 开发者来说就十分的便利和顺畅吧
但是核心一点需要注意的是我们的：Flutter 的话核心 OOP 的思想+前端的声明式编程的思想，所以说整体来说都是客观的开发能力实践吧
开发工具实践
官方默认支持的是使用 Android Studio 进行开发和学习，但是还是需要借助于插件的讷，当然也是具备前端学习开发者可以使用的是 vscode 的兼容插件拓展的
Android 和 Flutter 的内在联系
核心的对比关系表就是：页面加载、视图组件、页面跳转、网络请求、数据存储、状态管理、布局系统、原生交互等方面进行对比性的学习吧（Flutter All is widget）
因为这些都是跨平台或者说原生NA端的一些核心知识技巧吧，所以说很多的核心概念都是一样的，以及根源解决的问题也是一样的讷
跨平台应用的选择:
uniappflutterRNLynxdioxus
目前的移动端开发分类
一、Hybrid 混合开发
核心逻辑：以 Web 技术（React、Vue 等前端框架）为基础，通过 WebView 嵌入原生应用，再结合原生插件（如 Cordova 插件）实现原生能力调用，平衡跨平台效率与原生功能适配。
关键概念：
WebView：原生容器，承载前端页面的运行环境，是 Hybrid 与原生的 “桥梁”。
原生插件：封装原生能力（如摄像头、传感器），供前端代码调用，解决 Web 技术的原生能力短板。
二、跨平台开发框架
1. Flutter
核心逻辑：基于 Dart 语言，通过自绘引擎（Skia）直接渲染 UI，无需依赖原生组件，实现 “一套代码多端运行” 且性能接近原生。
关键概念：
Widget：一切 UI 元素的基础，分为 StatelessWidget（无状态）和 StatefulWidget（有状态），通过嵌套组合构建界面。
Dart 异步：通过
async/await、Future处理 IO 操作（如网络请求），保证界面流畅性。状态管理：通过 Provider、Bloc、Riverpod 等方案管理组件间状态共享，解决复杂界面的状态混乱问题。
2. React Native（RN）
核心逻辑：以 JavaScript 为开发语言，通过 “桥接（Bridge）” 机制调用原生组件渲染 UI，实现跨平台开发。
关键概念：
JSX 组件：融合 JavaScript 与 XML 语法的组件化语法，用于描述界面结构。
Bridge：JS 与原生代码的通信通道，负责将 JS 逻辑映射到原生组件执行。
状态管理：依赖 Redux、MobX、Context 等前端生态方案，管理组件状态与数据流转。
3. Lynx
核心逻辑：基于 DSL（领域特定语言）解析，结合原生渲染能力，在性能与开发效率间做平衡的跨平台方案。
关键概念：
DSL 解析：将自定义语法（类似 JSON/XML 结构）转换为原生界面指令，驱动原生组件渲染。
轻量引擎：相比其他跨平台框架，运行时体积更小、启动更快，适配中低端设备场景。
三、纯原生开发
核心逻辑：直接使用平台原生语言（Android 用 Java/Kotlin，iOS 用 Swift/Objective-C）和 SDK 开发，深度调用系统底层能力，性能与兼容性最优。
关键概念：
Android 侧：
Activity/Fragment：页面载体，分别对应独立页面和页面内可复用模块。
View/ViewGroup：视图组件的基础，通过 XML 或代码构建界面布局。
Jetpack 组件：如 LiveData（生命周期感知的数据）、ViewModel（页面状态管理），简化原生开发的复杂度。
iOS 侧：
UIViewController：页面控制器，管理页面的生命周期与交互逻辑。
UIKit 组件：如 UIView（基础视图）、UITableView（列表），是构建界面的核心元素。
Swift 特性：如可选类型（Optional）、闭包（Closure），提升代码安全性与开发效率。
四、无代码 / 低代码开发
核心逻辑：通过可视化拖拽、配置化逻辑（如流程引擎、组件库）生成 App，降低开发门槛。
关键概念：
可视化编辑器：提供界面组件、逻辑模块的拖拽工具，无需手写代码即可搭建界面。
配置化逻辑：通过表单、流程图等方式定义业务规则，替代传统代码的逻辑编写。
核心理论基础总结
Hybrid、跨平台开发与原生端集成的核心理论，本质是 “环境适配 + 通信桥接”：
前端代码运行依赖特定环境：前端（HTML/CSS/JS）原生运行于浏览器内核环境，若要在非浏览器的原生端（移动端、桌面端）运行，必须由原生端提供 “浏览器内核载体”（Web 容器），否则无法解析渲染前端代码。
跨端交互的核心是 “桥接机制”：前端与原生端（NA）属于不同技术栈（JS vs Java/Kotlin/Swift 等），需通过 Web 容器提供的通信通道（如 JSBridge）实现双向调用，完成数据传递与功能协同。
不同跨平台方案的核心差异：是否依赖 Web 容器（浏览器内核），以及渲染方式（原生组件渲染 vs 自绘渲染），直接决定了性能、兼容性与开发效率。
常见集成的浏览器内核方案
实际业务中，Web 容器的核心是 “浏览器内核”，不同方案的本质是选择 / 封装不同内核，以下是主流方案及业务适配场景：
系统内置内核方案
核心内核：
移动端 Android（4.4+）：Chromium 内核（与 Chrome 同源），系统内置 WebView 组件封装；
移动端 iOS（8+）：WebKit 内核（Safari 同源），通过 WKWebView 组件封装；
桌面端：Windows（Edge 内核 / Chromium）、macOS（WebKit）、Linux（Chromium），系统原生提供内核能力。
集成方式：原生端直接调用系统自带组件（如 Android 的 WebView、iOS 的 WKWebView、桌面端 Electron 的 BrowserWindow）。
业务适配场景：
适用：轻中度交互场景（如 App 内 H5 页面、企业后台管理系统、简单工具类桌面应用）；
优势：无额外包体积负担、系统兼容性最佳、开发成本低；
劣势：Android 碎片化下内核版本不一致（部分老旧机型内核版本低，HTML5 特性支持差）。
第三方定制内核方案
代表方案：腾讯 X5 内核（Android 端）、CEF（Chromium Embedded Framework，跨桌面端）；
核心内核：基于 Chromium 深度定制，保留核心能力并优化特定场景；
集成方式：接入第三方 SDK，替换系统原生 WebView（如 Android 用腾讯 X5 的 WebView 替代系统 WebView）；
业务适配场景：
腾讯 X5：Android 端复杂 H5 场景（如视频播放、文件上传下载、WebRTC 实时通信），解决碎片化导致的兼容性问题（如微信、QQ、美团等 App 广泛使用）；
CEF：桌面端重度 Web 交互场景（如 Electron 应用、Qt 桌面应用内嵌 Web 功能），需与 Chrome 体验完全一致（如钉钉桌面端、VS Code 插件系统）；
优势：性能稳定、特性统一、支持高级功能（如自定义渲染、插件扩展）；
劣势：增加包体积（X5 内核约 10-20MB）、需接入第三方服务（依赖厂商维护）。
跨平台框架封装方案
代表方案：UniWebView（Unity 游戏引擎）、Tauri（跨桌面端）、Cordova/Ionic（移动端 Hybrid）；
核心内核：底层复用系统原生内核或第三方内核，上层提供统一 API；
集成方式：通过框架提供的组件 / 接口调用 Web 容器（如 Unity 中用 UniWebView 加载 H5 活动页）；
业务适配场景：
适用：跨平台快速开发（如游戏内嵌入 H5 活动、轻量桌面工具、多端共用 H5 页面）；
优势：屏蔽多端内核差异，前端代码一次开发多端复用；
劣势：定制化能力弱，复杂场景（如高性能动画）体验不如原生封装。
主流浏览器内核区别
实际业务中接触的核心内核只有 3 类：Chromium、WebKit、系统定制内核（基于前两者），差异直接影响业务选型：
业务决策关键点：
iOS 端无选择：必须用 WebKit 内核（WKWebView），业务需适配 Safari 的特性限制（如本地存储容量、JS 执行效率）；
Android 端优先选 X5：若需兼容中低端机型或复杂 H5 功能（如视频直播、文件上传），X5 内核比系统 WebView 更稳定；简单场景（如静态页面）用系统 WebView 即可；
桌面端优先 Chromium：Electron、CEF 均基于 Chromium，保证与 Chrome 一致的体验，适合桌面端重度 Web 交互（如在线编辑器、协作工具）。
Hybrid 与 RN/Lynx/Flutter 的核心区别
核心结论：Hybrid 依赖 WebView（浏览器内核），RN/Lynx/Flutter 不依赖 WebView，这是本质差异，直接决定性能与体验：
Flutter 创建项目
flutter create <project_name>核心的开发工具是我们的
Android Studio吧但是这里需要注意的是，我们的 Android studio 核心只能加载 android 的应用，此时需要体现下载插件
Flutter和Dart插件，否则就无法实现看到 flutter 原本的代码吧
flutter dector实现快速的检查环境吧在进行移动端 APP 开发的时候，一定要进行配置 Android SDK（SDK Manager）
Android SDK Command-line Toolsflutter doctor --android-licenses以及持续调试使用
sdkmanager工具，很难受吧反正，呃呃呃
setx SDKMANAGER_MIRROR_URL "https://mirrors.cloud.tencent.com/android/repository/"
setx SDKMANAGER_CHANNEL "3"
sdkmanager --sdk_root=E:\worktools\android\androidSDK --channel=3 "system-images;android-36;google_apis_playstore;x86_64"由于 google 对国内已经封杀了，此时需要做的就是进行设置镜像源吧，这样会好很多讷
安装了模拟器后，随便玩就行了，哈哈
设置flutter 镜像源
setx FLUTTER_STORAGE_BASE_URL "https://mirrors.tuna.tsinghua.edu.cn/flutter"
setx PUB_HOSTED_URL "https://mirrors.tuna.tsinghua.edu.cn/dart-pub"
flutter config --android-sdk "E:\worktools\android\androidSDK" # Flutter 有自己的检测机制，这里需要注意一下
flutter config
# 设置Flutter永远使用镜像
flutter config --no-analytics
flutter config --enable-web
# 修改 wrapper 配置文件
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https://mirrors.cloud.tencent.com/gradle/gradle-8.13-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
垃圾 NA flutter