Flutter学习day1–环境搭建与Dart基础

想入门 Flutter，第一关不是 Widget，而是两件事：把环境跑起来、把 Dart 的基础语法理顺。本文从环境搭建讲到 Dart 变量声明的三个关键字，再用官方计数器 demo 拆解 Flutter 应用的最小骨架，最后说说 Flutter 的招牌能力——热重载。如果你是从 ArkTS/鸿蒙或前端转过来的开发者，文中附了对应的类比，可以对照着学。

一、环境搭建：先跑通 flutter doctor

安装 Flutter SDK 后，第一件事不是写代码，而是运行：

flutter doctor

它会逐项体检：Flutter SDK 本体、Android 工具链、Chrome（Web 调试用）、已连接设备等，有问题的项会直接给出修复建议，照着处理即可。

几个常见的坑：

• 运行调试优先用 IDE 的官方 Flutter 扩展（Android Studio / VS Code）或终端 flutter run；不要依赖第三方插件去直接调 dart 命令，容易遇到 dart: command not found——本质是 SDK 没进 PATH，把 flutter/bin 加入 PATH 即可。
• 环境是否健康的验收标准：官方计数器 demo 能跑起来，改一行文字保存后界面能热更新。

二、Dart 变量声明：var / final / const 三兄弟

var a = 1;
a = 2;                      // OK

final b = DateTime.now();   // OK：运行时确定
const c = DateTime.now();   // 编译错误：编译期无法确定

const list1 = [1, 2, 3];
final list2 = [1, 2, 3];
list1.add(4);               // 编译错误：const 集合不可变
list2.add(4);               // OK：final 只锁引用本身

要点：

• final 允许值在运行时确定，比如从接口取回的数据；const 必须在写代码时就能确定。
• const 是深度不可变：const 修饰的集合连元素都不能改，而且相同的 const 值在内存中共享同一实例。
• 类比其他语言：TypeScript 的 const ≈ Dart 的 final（锁引用，内容可能可变）；Dart 的 const 更像 as const 断言加深冻结。

实战提示：Flutter 中把不变的配置、颜色、样式声明为 const，框架可以跳过不必要的重建，是最简单的性能优化手段。

三、最小应用骨架：计数器 demo 解剖

官方计数器 demo 是 Flutter 应用的最小可运行骨架，结构值得逐行看清：

void main() {
  runApp(const MyApp());            // 挂载根 Widget
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(             // 应用级配置：主题、首页、路由
      home: const MyHomePage(),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {                   // 修改状态 + 触发重建
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(                // 页面骨架：appBar / body / floatingActionButton
      appBar: AppBar(title: const Text('Flutter Demo')),
      body: Center(child: Text('$_counter')),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

• runApp → MaterialApp → Scaffold 是入口三件套：MaterialApp 负责应用级配置，Scaffold 提供页面骨架（标题栏、内容区、浮动按钮）。
• 状态管理靠 StatefulWidget + State；setState(() {...}) 修改状态并通知框架重新执行 build()，是「数据驱动刷新」的标准写法。
• 类比 ArkUI：MaterialApp ≈ 应用入口配置，Scaffold ≈ 页面布局容器，setState ≈ @State 变量变更触发的刷新——声明式 UI、数据驱动的思路是相通的。

四、热重载：秒级见效的开发循环

Flutter 的招牌能力是热重载（Hot Reload）：

• 原理：保存代码后，框架增量编译改动的 Dart 代码，注入到正在运行的 Dart VM（JIT 模式），然后保留当前 State、重新执行 build() 刷新界面。改 UI 秒级见效，页面上已有的状态（比如输入框内容）不会丢。
• 限制：main()、initState() 这类只执行一次的代码，改动需要热重启（Hot Restart），状态会清空。
• 与 ArkTS Previewer 的区别：Previewer 是独立的预览渲染器，渲染的是简化环境；热重载直接作用于运行中的 App 本体，状态保留是核心卖点。

调布局、颜色、动效时，热重载就是开发效率的核心：保存即所见。

小结

• flutter doctor 是环境排障第一入口，验收标准是计数器 demo 能跑、能热更新。
• Dart 三兄弟一句话：var 可变，final 运行时定值，const 编译期常量且深度不可变。
• 最小骨架记住链条：runApp → MaterialApp → Scaffold → setState。
• 热重载 = 增量注入 + 保留 State + 重跑 build()，是 Flutter 迭代速度的来源。