Flutter 安装

• 问题：Downloading the Flutter SDK. This may take a few minutes.
• 解决：管理员身份 运行 PowerShell
• 输入以下命令

$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"

$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

flutter 依赖下载

flutter pub add ant_design_flutter

Flutter 是什么？它的核心优势是什么？

• Flutter 是 Google 推出的跨平台 UI 框架，通过自绘引擎（而非 WebView / 原生组件桥接）实现多端一致的 UI，支持 iOS/Android/Windows/macOS/Web 等平台。

核心优势：

• 跨平台一致性：自绘渲染，无原生组件差异；
• 高性能：Skia 引擎 + JIT/AOT 编译，接近原生性能；
• 热重载：开发效率高；
• 单一代码库：一套代码多端运行；
• 丰富的组件库：Material Design/Cupertino 组件开箱即用

Dart 语言的核心特性？为什么 Flutter 选择 Dart？

Dart 核心特性：

• 强类型（支持动态类型）、面向对象、异步（async/await/Future/Stream）；
• 支持 JIT（即时编译，热重载）和 AOT（提前编译，发布包高性能）；
• 单线程 + 事件循环（Isolate 实现多线程）；
• 空安全（Null Safety）。

选择 Dart 原因：

• JIT/AOT 兼顾开发效率和运行性能；
• 单线程模型降低跨线程通信成本；
• 静态类型减少运行时错误；
• Google 可控，易与 Flutter 深度优化

Flutter 的三大核心架构层是什么？

• 框架层（Framework）：Dart 编写的上层 API，如 等； Widget、RenderObject、Animation
• 引擎层（Engine）：C/C++ 编写的核心，包含 Skia 渲染引擎、Dart 运行时、文本渲染等；
• 嵌入层（Embedder）：适配不同平台的底层封装，如 Android 的 Activity、iOS 的 UIViewController 集成。

Flutter 核心概念

• 变量声明（var / final / const）
  • var 适用场景：类的成员变量、函数参数、需要明确类型的核心变量，类型推断可变
  • final 赋值后不可修改，支持类型推断或显式类型, 运行时确定值（StatelessWidget/StatefulWidget 的成员参数,可赋值动态数据，如用户 ID、接口返回的固定值、设备信息）
  • const 赋值后不可修改，支持类型推断或显式类型,编译时确定值（只能赋值「字面量」，如数字、字符串、const 构造的对象）
  • 总结
    • 可变性选择：能不用可变变量（var/显式类型）就不用，优先用 final（运行时）/ const（编译时），符合 Flutter Widget 的不可变设计，还能优化性能；
    • 空安全选择：可空变量加?，延迟初始化用late，非空断言!尽量少用（优先用??判空）；
    • Flutter 实战原则：
      • StatelessWidget（无状态） 的参数必须用 final；
      • 静态 Widget（如固定文本、边距）用const修饰，减少重建
      • StatefulWidget 中延迟初始化的非空变量用late

Flutter 与 Vue、React 的区别

• https://www.doubao.com/chat/31624762199670018
• 基础组件（如 Text / Container / Row / Column）
• Widget 生命周期：StatelessWidget（无状态）和 StatefulWidget（有状态）的区别
  • 如果一个 Widget 会变化（例如由于用户交互），它是有状态的。然而，如果一个 Widget 响应变化，它的父 Widget 只要本身不响应变化，就依然是无状态的
• 布局系统：

基于 Widget 嵌套的布局（如 Stack/Expanded/MediaQuery）和传统前端的 CSS 布局逻辑不同，需要适应 “约束向下传递，尺寸向上反馈” 的机制；

• 状态管理：简单场景用 setState 即可，但复杂应用需要学习 Provider/Bloc/GetX 等方案，理解 “状态分离” 的思想需要时间
• Flutter 用 Row / Column（对应 Flex）、Stack（对应绝对定位）、Expanded（对应 flex:1）等 Widget 实现布局
• 通过 Padding / SizedBox 控制间距、MediaQuery 获取屏幕尺寸
• 强制空安全：
  • String? a = null;（加?表示可空）
  • String b = a!;（!断言非空，类似 TS 的!）
• Dart 默认开启空安全（Null Safety），变量默认不可为空
• Dart 的箭头函数（=>）只能是单行表达式（无{}）
• Dart 区分命名参数（调用时需写参数名：fn(a:10, b:20)）和位置参数
• Flutter 无 “模板语法”，所有 UI 由 Widget 对象嵌套实现
• Flutter 无 “通用容器” <div>，需用 Container（带样式的容器）、SizedBox（占位）、Padding（内边距）等专用 Widget 替代
• Flutter 的交互 Widget（如 ElevatedButton）需通过 onPressed 等属性绑定事件，而非 HTML 的 onClick
• Flutter 无 CSS 的 “盒模型属性”，需用 EdgeInsets、double.infinity 等 Dart 对象/常量替代；布局逻辑由 Row/Column/Stack 等 Widget 实现
• Flutter 用 Expanded Widget 实现 “flex:1” 效果，需包裹子 Widget
• Flutter 用 Stack（相对定位容器）+ Positioned（绝对定位子 Widget）替代 CSS 的 position:relative/absolute
• Flutter 无 “模板指令”，直接用 Dart 的三元运算符或专用 Widget（Visibility/If）实现条件渲染；前端支持&&短路渲染，Flutter 需用三元或 if 块（集合内）
• Flutter 推荐用 ListView.builder（懒加载，性能优）替代前端的 map 循环；需显式指定itemCount和itemBuilder
• Flutter 的组件内状态必须放在 State 类中，通过 setState 触发重建
• Flutter 的状态管理依赖 ChangeNotifier/Provider（或 Bloc/GetX），需手动调用 notifyListeners
• Dart 的 Future 对应 JS 的 Promise，用法几乎一致；Dart 的 Stream 原生支持流式数据（无需第三方库），async*/yield 替代 RxJS 的 Observable/next
• Flutter 无 CSS 文件，样式通过 TextStyle/BoxDecoration 等对象定义；全局样式依赖 ThemeData，而非 CSS 全局类或变量；尺寸无单位（基于逻辑像素）
• Flutter 通过类成员变量接收参数，需在构造函数中声明；
• Flutter 无 “插槽” 概念，通过 List<Widget> children 或命名参数（如 title）实现插槽效果
• @override：标注方法重写父类，核心作用是编译器校验 + 代码可读性，是 Flutter 生命周期方法的必备注解；
• _：将标识符私有化，核心作用是封装内部实现 + 符合 Flutter 规范，State 类必须私有化；
• 每个 stateful widget 都有一个 initState() 方法，它会在 widget 创建并添加到 widget 树时调用。你可以重写这个方法并在其中进行初始化，但这个方法的第一行 必须 是 super.initState()
• 许多内置的 Widget 都是无状态的，比如 Padding、Text 和 Icon, 当你构建自定义 Widget 时，优先采用 无状态 (Stateless) Widget
• 如果一个 Widget 的某些特性需要随用户交互或其他因素而改变，则这个 Widget 是有状态的, StatefulWidget 没有 build 方法，它们的用户界面是通过关联其 State 对象来构建的
• Flutter 没有 “给 Text 加点击事件” 的写法，而是用 GestureDetector 包裹 Text

GestureDetector(
  onTap: () => print("文字被点击"),
  child: const Text("可点击的文字"),
);

• Container 不是万能的：新手容易所有场景都用 Container，其实简单的边距用 Padding、固定大小用 SizedBox，性能更好

部件

基础显示 Widget

这些是构成界面静态内容的基础。

布局 Widget

布局 Widget 负责安排其他 Widget 在屏幕上的位置，可分为单子布局和多子布局。

单子布局 Widget

常用于包裹一个子 Widget，提供约束或装饰。

多子布局 Widget

用于排列多个子 Widget。

交互 Widget

这些 Widget 可以响应用户操作

• Center、Container、Padding 拥有 child 属性
• Row、Column、ListView、Stack 拥有 children 属性
• Row 中 通过 mainAxisAlignment 和控制行或列如何对齐其子节点， crossAxisAlignment 属性。 对于一行，主轴水平且 横轴是垂直的。对于一列， 主轴线 垂直方向，横轴方向
• ListView 是一个列状小部件，当内容长度超过渲染框时，会自动提供滚动功能。
  • 当列表项目数量未知或非常多（甚至无限多）时，最好使用 ListView.builder 构造器，用于懒惰渲染列表中的项目
• 通过 Expanded 扩展控件， 小部件可以调整大小以适应行或列，还可以决定小部件相对于其他小部件应占用多少空间（使用 flex 属性 ）
• LayoutBuilder 制作自适应布局
• Container：向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”
• GridView 将 widget 展示为一个可滚动的网格
• Scaffold 提供结构化的布局框架，为常用的 Material Design 应用元素提供插槽。
• AppBar 创建一个显示在屏幕顶部的横条。
• Card 将相关信息整理到一个有圆角和阴影的盒子中,
  • 通常和 ListTile 一起使用
  • Card 只有一个子项，这个子项可以是列、行、列表、网格或者其他支持多个子项的 widget
  • Card 默认情况下，Card 的内容区域会填充整个 Card 默认情况下，Card 的大小是 0x0 像素。你可以使用 SizedBox 控制 card 的大小
• ListTile 将最多三行的文本、可选的导语以及后面的图标组织在一行中。
• EdgeInsets 是 Flutter 中用于设置**内边距（Padding）和外边距（Margin）**的类
  • EdgeInsets.zero - 所有方向边距为 0
  • EdgeInsets.all(10.0) - 所有方向边距都为 10
  • EdgeInsets.symmetric(horizontal: 10.w, vertical: 8.h) - 水平/垂直方向对称边距
  • EdgeInsets.only(left: 10.w, right: 10.w) - 只设置指定方向边距

建造模式

• ListView.builder 用于懒惰渲染列表中的项目
• GridView.builder
• Builder 构建器小部件则用于访问深度控件代码中的 BuildContext
• LayoutBuilder 用于根据视口大小创建响应式布局
• FutureBuilder

按钮

• 由三部分组成：样式、回调及其子节点
  • 回调：按钮的回调函数 onPressed 决定点击按钮时发生什么，如果回调为空 ，按钮将被禁用，用户按下按钮时不会有任何反应
  • 子节点: 按钮的子节点显示在按钮内容区域内，通常是表示按钮用途的文本或图标
  • 样式: 控制其外观：颜色、边框等

int count = 0;

@override
Widget build(BuildContext context) {
  return ElevatedButton(
    style: ElevatedButton.styleFrom(
      textStyle: const TextStyle(fontSize: 20),
    ),
    onPressed: () {
      setState(() {
        count += 1;
      });
    },
    child: const Text('Enabled'),
  );
}

常见错误

• 在构建 Flutter 应用时，最常见的错误可能是错误使用布局控件，这被称为“无界约束”错误。

样式

• 默认情况下，widget 相对于其父元素定位，指定一个 widget 的绝对位置，可以把它放在一个 Positioned widget 中，而 Positioned 则需被放在一个 Stack widget 中
• 使用 Text widget 的 maxLines 属性来指定包含在摘要中的行数，以及 overflow 属性来处理溢出文本

flutter、uniapp、react native 三者对比

@override 注解的作用

• @override 是 Dart 的注解（Annotation），专门用于标注 “当前方法 / 属性重写了父类（超类）的同名方法 / 属性
  • 编译器校验：确保父类确实存在这个方法，避免拼写错误（比如把 initState 写成 inittState，编译器会直接报错）；
  • 代码可读性：明确告诉开发者 “这个方法不是自定义的，而是覆盖了父类的默认实现”，尤其是 Flutter 生命周期方法（initState/build/dispose 等），一眼就能识别；
  • 功能合法性：Flutter 的核心生命周期方法（如 createState/build）必须通过@override 重写才能生效，这是框架的强制规范
• _（下划线）的作用
  • Dart 中，标识符（类、方法、变量名）以_开头，表示 “库私有（private）”
  • 这个类 / 方法 / 变量只能在当前.dart 文件中访问；
  • 外部文件即使 import 了当前文件，也无法访问这个标识符
  • 所有 StatefulWidget 对应的 State 类都推荐用_私有化（因为 State 的逻辑只服务于对应的 Widget，无需暴露）
  • State 必须由 Widget 的 createState 创建，不能手动实例化

Widget 分类

flutter 与 React、Vue 的异同

flutter 状态管理与前端状态管理的区别

网络请求（Dio）

• Dio 是一个基于 Http 的第三方网络请求库，基于 Promise，支持 GET/POST/PUT/DELETE/PATCH/HEAD 等请求方式

指定资源

• 在 pubspec.yaml 文件中，指定资源文件，比如图片、字体、音频、视频等

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

• 在不同平台读取 Flutter assets， Android 是通过 AssetManager，iOS 是 NSBundle

flutter 路由

• 静态路由（命名路由）：提前在 MaterialApp 中注册路由名称和对应页面，通过名称跳转，配置简单，适合页面少、传参简单的场景。
  • 传参方式：通过 Navigator.pushNamed(context, '/detail', arguments: '参数值')传参，在详情页通过 ModalRoute.of(context)?.settings.arguments 接收。
  • 优点：配置简单，代码集中，新手易上手；
  • 缺点：传参无类型校验（容易出错）、不支持复杂路由拦截 / 嵌套路由，适合小型项目（≤5 个页面）

...
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '静态路由示例',
      // 1. 注册路由表
      routes: {
        '/': (context) => const HomePage(), // 根路由
        '/detail': (context) => const DetailPage(), // 详情页
      },
      initialRoute: '/', // 初始路由
    );
  }
...

• 动态路由：无需提前注册路由表，直接通过 Navigator.push 手动构建路由对象跳转，灵活性更高，传参更直观。
  • 优点：传参直观（支持强类型）、跳转灵活，适合少量页面的自定义跳转；
  • 缺点：页面多了后，跳转逻辑分散，难以维护，无路由守卫 / 拦截能力。

// 首页跳转逻辑修改
ElevatedButton(
  onPressed: () {
    // 动态跳转并传参
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const DetailPage(message: '从首页传递的参数'),
      ),
    );
  },
  child: const Text('动态跳转到详情页'),
);

// 详情页接收参数
class DetailPage extends StatelessWidget {
  final String message;
  const DetailPage({super.key, required this.message}); // 接收参数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('详情页')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('接收的参数：$message'),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('返回'),
            ),
          ],
        ),
      ),
    );
  }
}

• 第三方路由框架（中大型项目首选）
  • GoRouter（Google 官方推荐，当前主流）
    • 核心特点：Google 推出的声明式路由框架，支持移动端 / WEB / 桌面端，内置路由守卫、嵌套路由、路由重定向，是目前 Flutter 官方主推的方案。
    • 核心优势：
      • 声明式配置，路由结构清晰；
      • 支持嵌套路由（比如底部导航 + 子页面跳转）、路由守卫、重定向；
      • 适配多端（WEB 端 URL 跳转友好）；
      • 官方维护，兼容性和稳定性有保障。
      • 适用场景：中大型 Flutter 项目（尤其是跨端项目、需要复杂路由逻辑的场景）
  • Fluro（老牌第三方路由）
    • Flutter 生态中老牌的路由框架，轻量、灵活，支持路由拦截、参数解析，社区成熟
    • 核心优势：轻量、拦截器灵活（比如统一处理登录校验）、适配老项目；
    • 缺点：维护频率低，嵌套路由不如 GoRouter 友好；
    • 适用场景：中小型项目、老 Flutter 项目迁移

flutter 状态管理

1. 内置原生方案

• StatefulWidget + setState
  • 核心特点：最基础的状态管理方式，仅适用于单个组件内部的状态维护（状态私有，无法跨组件共享）。
  • 适用场景：单个组件的简单状态（比如按钮是否选中、输入框临时内容、页面内计数器）
  • 优点：零学习成本，写法简单，新手易上手；
  • 缺点：状态无法跨组件共享，复杂页面会导致大量不必要的 UI 重建，代码易混乱
• InheritedWidget
  • 核心特点：Flutter 底层的跨组件状态共享方案，是很多第三方状态管理（如 Provider）的底层实现，支持 “状态向下共享”。
  • 适用场景：底层封装（很少直接使用），适合需要自定义共享逻辑的场景。
  • 核心逻辑：通过 InheritedWidget 包裹共享状态，子组件通过 BuildContext 获取状态，状态更新时自动通知依赖的子组件重建。
  • 优点：原生支持，性能好（仅依赖的组件重建）；
  • 缺点：写法繁琐，需要手动管理状态更新，新手理解成本高。
• Provider（官方推荐的轻量共享方案）
  • 核心特点：基于InheritedWidget封装的轻量框架（虽为第三方，但 Flutter 官方文档重点推荐），解决了原生InheritedWidget写法繁琐的问题，是中小型项目的首选
  • 优点：轻量、易上手，官方推荐，适配 80% 的中小型项目；
  • 缺点：复杂业务下状态逻辑易分散，缺乏统一规范，无内置异步状态处理。

2. 第三方进阶状态管理框架（中大型项目）

• Riverpod（Provider 的升级版，推荐）
  • 核心特点：Provider 的作者推出的升级版，解决了 Provider 的核心痛点（如上下文依赖、多例冲突、状态复用难），无上下文依赖，支持强类型和异步状态，是目前中大型项目的首选。
  • 核心优势：无上下文依赖、类型安全、支持异步状态（FutureProvider/StreamProvider）、状态复用性强；
  • 适用场景：中大型项目、对代码健壮性要求高的场景、团队协作项目。
• GetX（全能型，高效）
  • 核心特点：不仅是状态管理，还整合了路由、依赖注入、国际化等功能，无上下文依赖，写法极简，开发效率极高。
  • 核心优势：全能（状态 + 路由 + 依赖注入）、极简写法、开发效率最高、无上下文依赖；
  • 缺点：过于灵活，团队协作易缺乏规范，复杂业务下状态追踪稍难；
  • 适用场景：中小型项目、快速迭代项目、全栈开发者 / 个人项目

3. 其他状态管理方案

总结：

• 选型核心思路：小项目 / 单个组件：setState（简单状态）、Provider（跨组件共享）；
• 中大型项目 / 团队协作：优先 Riverpod（易上手、健壮）或 Bloc（规范、可测试）；
• 追求极致开发效率：GetX（全能、极简）。
• 核心原则：状态管理没有 “最优方案”，只有 “适配场景”—— 核心看项目规模、团队技术栈、是否需要可测试性 / 可维护性。
• 学习优先级：先掌握 setState 理解核心逻辑 → 再学 Provider 掌握共享思路 → 最后根据场景选 Riverpod/Bloc/GetX 深入其一即可

Provider 的核心原理？

• 基于InheritedWidget实现数据共享；
  • ChangeNotifier：维护状态，状态变化时调用notifyListeners；
  • ChangeNotifierProvider：将 ChangeNotifier 注入 Widget 树；
  • Consumer/Selector：监听数据变化，仅在数据改变时重建 UI（Selector 可筛选需要监听的字段，减少重建）。
• Bloc 的核心概念（Event/State/Bloc）？
  • Event：用户行为（如点击按钮、请求数据）；
  • State：UI 状态（如加载中、加载成功、加载失败）；
  • Bloc：接收 Event，处理业务逻辑，输出新 State；
  • 核心流程：UI 触发 Event -> Bloc 处理 Event -> Bloc 发送新 State -> UI 监听 State 刷新。

全局状态 vs 局部状态如何选择？

• 局部状态：仅当前 Widget / 页面使用（如按钮是否选中、输入框内容），用setState；
• 全局状态：多页面 / 组件共享（如用户信息、主题、语言），用 Provider/Bloc/GetX 等

flutter 数据获取（推荐使用dio）

• 网络数据获取（最核心，对接后端接口）
  • 原生 HttpClient（无依赖，基础）
    • flutter 内置的dart:io库提供了HttpClient，无需依赖第三方包，适合简单请求场景。
      • 优点：无依赖，原生支持；
      • 缺点：写法繁琐（需手动处理请求 / 响应、解析、异常），无拦截器、取消请求等高级功能；
      • 适用场景：极简单的请求、学习网络请求原理。
  • http：Flutter 官方的轻量级 HTTP 客户端，封装了HttpClient，简化了请求写法，适合简单请求场景
    • 优点：比原生HttpClient简洁，轻量，官方推荐；
    • 缺点：缺乏拦截器、请求取消、超时配置等高级功能；
    • 适用场景：中小型项目、简单接口请求
  • Dio（推荐）：功能强大的网络请求库，支持拦截器、取消请求、文件上传下载、超时设置等，企业级首选
  • chopper：基于 Retrofit 思想的网络库，支持代码生成，适合大型项目

initState

• initState 是 StatefulWidget 对应 State 的生命周期方法，在 State 对象被插入到元素树时只调用一次，用来做一次性初始化工作（如创建控制器、添加监听、启动定时器、初始化 Dio/动画等）。
  • 必须调用 super.initState()
  • 这里适合同步初始化；如果需要异步操作，可在 initState 中调用异步函数，但不要把 initState 标记为 async。
  • 不要在 initState 中依赖 InheritedWidget（如 Theme.of / Provider.of(context) 等），这类依赖应放到 didChangeDependencies 中处理。
  • 对应的清理工作应在 dispose() 中完成（取消订阅、释放控制器等）

指定环境变量

# 方案1：命令行传参（推荐）
flutter run -d chrome --dart-define=ENV=dev  # Web端
flutter run -d android --dart-define=ENV=dev # Android端

# 方案2：如果用了List<String> args传参
flutter run -d chrome dev

# Web端打包（生产环境）
flutter build web --dart-define=ENV=prod

# Android打包（生产环境）
flutter build apk --release --dart-define=ENV=prod

# iOS打包（生产环境）
flutter build ipa --release --dart-define=ENV=prod

常用的第三方库

• 核心基础类

• UI 组件类（增强原生组件）

• 设备 / 系统功能类（对接原生能力）
  • 这类库封装了设备硬件、系统功能的原生接口，无需手动写原生代码。

• 工具类（提升开发效率）
  • 这类库解决 JSON 解析、环境配置、日志、日期处理等通用问题。

• 可视化 / 图表类（数据展示）
  • 这类库用于实现图表、地图等可视化需求。

• 国际化 / 本地化类

• 测试 / 调试类

@override 的使用场景

• @override 注解并不仅限于 StatefulWidget 中使用，它可以在多种情况下使用：

1. 继承父类方法时

• 当子类重写父类的方法时，需要使用 @override
• 例如：StatefulWidget 的 createState()、State 类的 initState()、build() 等

2. 实现接口方法时

• 实现抽象类或接口定义的方法时

3. 生命周期方法

@override
void initState() {  // StatefulWidget 中的初始化方法
  super.initState();
  // 初始化逻辑
}

4. 构建方法

@override
Widget build(BuildContext context) {  // 构建UI界面
  return Scaffold(...);
}

5. 其他情况

• 重写 toString()、hashCode、operator == 等基础方法
• 重写任何从父类继承来的方法

什么时候必须使用 @override

只要你在类中重写了从父类继承来的方法，都应该使用 @override，这不仅仅是语法要求，更重要的是：

• 编译时检查：确保你重写的方法确实存在于父类中
• 代码可读性：明确标识这是重写的方法
• 维护性：避免因拼写错误导致创建了新方法而非重写现有方法

所以 @override 不仅限于 StatefulWidget，在任何继承关系中重写方法时都应使用。

Flutter 生命周期方法

• initState：State 对象插入到树中时调用，只调用一次。用于初始化状态、订阅数据流、添加监听器等。
• build：构建 UI 界面的方法，每次调用 setState 后都会重新调用。返回一个 Widget 树。
• dispose：State 对象从树中移除时调用。用于释放资源、取消订阅、移除监听器等。