编程马·菜鸟教程

Appearance

第1章：Flutter 入门认知 ​

1.1 什么是Flutter？ ​

Flutter 是 Google 推出的开源跨平台 UI 框架，使用 Dart 语言开发，能够让开发者用一套代码同时构建 iOS、Android、Web、桌面和嵌入式设备的应用。

核心特点：

  • 跨平台一致性：一套代码运行在多个平台，保持 UI 一致性
  • 高性能：使用 Skia 图形引擎，原生渲染，性能接近原生应用
  • 热重载：修改代码后实时预览效果，无需重新编译
  • 开发效率高：丰富的组件库和工具链
  • 与 Dart 深度绑定：Dart 语言专为 Flutter 优化

1.2 为什么要学Flutter？ ​

核心优势 ​

  1. 跨平台开发：一次编码，多平台运行，节省开发时间和成本
  2. 高性能：原生渲染，流畅的动画效果，60fps 稳定帧率
  3. 热重载：快速迭代，即时查看修改效果
  4. 丰富的组件库：Material Design 和 Cupertino 风格组件，满足不同平台设计需求
  5. 强大的生态系统：丰富的第三方包和插件
  6. Google 支持：持续维护和更新，技术支持有保障

就业前景 ​

Flutter 已成为移动开发的热门技术，许多公司正在使用或计划使用 Flutter 开发应用，掌握 Flutter 可以增加就业竞争力。

1.3 Flutter 的应用场景 ​

主要应用场景 ​

  1. 移动应用开发：iOS 和 Android 应用
  2. 跨平台 APP：企业应用、社交应用、电商应用等
  3. 小程序：Flutter 可以编译为 Web 应用，用于小程序开发
  4. 桌面应用：Windows、macOS、Linux 桌面应用
  5. 嵌入式设备：物联网设备界面

经典案例 ​

  • 微信小程序：部分功能使用 Flutter 开发
  • 字节系 APP：如抖音、TikTok 等应用的部分功能
  • 阿里巴巴：部分电商应用
  • Google Pay：使用 Flutter 开发

1.4 Flutter 与其他跨平台框架的区别 ​

框架技术栈渲染方式性能热重载学习曲线
FlutterDart自绘 UI（Skia）接近原生支持中等
React NativeJavaScript原生组件良好支持中等
UniAppVueWebView/原生一般支持低
IonicAngular/React/VueWebView一般支持低

核心差异 ​

  • Flutter：自绘 UI，不依赖原生组件，UI 一致性更好
  • React Native：使用原生组件，UI 更接近原生，但一致性稍差
  • UniApp：多端开发，覆盖面广，但性能相对较弱

1.5 学习前提：Dart基础回顾 ​

Flutter 使用 Dart 语言开发，因此需要掌握 Dart 的基础语法。

重点回顾内容 ​

  1. 核心语法：变量、数据类型、运算符、流程控制
  2. 函数：函数定义、可选参数、命名参数、箭头函数
  3. 面向对象：类、继承、接口、mixin
  4. 集合：List、Set、Map 的基本操作
  5. 异步编程：Future、async/await、Stream
  6. 异常处理：try-catch、异常类型

学习建议 ​

  • 无需精通 Dart，掌握基础语法即可开始学习 Flutter
  • 在学习 Flutter 的过程中，会逐步加深对 Dart 的理解
  • 可以参考此前的 Dart 教程进行回顾

1.6 学习路线规划 ​

新手学习路线 ​

  1. 第一阶段：Dart 基础（1-2周）

    • 学习 Dart 核心语法
    • 熟悉面向对象编程
    • 掌握异步编程

  2. 第二阶段：Flutter 核心基础（2-3周）

    • Flutter 核心概念（Widget、BuildContext）
    • 基础组件（Text、Image、Button、TextField）
    • 布局开发（Row、Column、Stack、Flex）
    • 状态管理（setState、Provider）

  3. 第三阶段：Flutter 进阶功能（2-3周）

    • 路由与导航
    • 网络请求
    • 本地存储
    • 动画效果

  4. 第四阶段：实战项目（3-4周）

    • 小型应用（如待办事项、天气应用）
    • 中型应用（如新闻应用、电商应用）
    • 项目部署与发布

学习资源推荐 ​

  • 官方文档：Flutter 官方文档（https://flutter.dev/docs）
  • 视频教程：Flutter 官方视频、YouTube 教程
  • 书籍：《Flutter 实战》、《Flutter 从入门到精通》
  • 社区：Flutter 中文社区、Stack Overflow

1.7 第一个Flutter程序 ​

步骤 1：创建 Flutter 项目 ​

使用 VS Code 或 Android Studio 创建 Flutter 项目：

VS Code：

  1. 打开 VS Code
  2. 按 Ctrl+Shift+P 打开命令面板
  3. 输入 "Flutter: New Project"
  4. 选择项目目录和类型（Application）
  5. 等待项目创建完成

Android Studio：

  1. 打开 Android Studio
  2. 选择 "New Flutter Project"
  3. 选择 "Flutter Application"
  4. 填写项目信息
  5. 等待项目创建完成

步骤 2：运行模拟器 ​

  • Android 模拟器：在 VS Code 或 Android Studio 中启动 AVD Manager，创建并启动模拟器
  • iOS 模拟器：在 Mac 上使用 Xcode 启动 iOS 模拟器
  • 真机调试：连接手机，开启 USB 调试模式

步骤 3：运行默认项目 ​

在 VS Code 中：

  1. 按 F5 运行项目
  2. 等待应用安装到模拟器/真机
  3. 查看默认的计数器应用

步骤 4：修改页面内容 ​

打开 lib/main.dart 文件，修改代码：

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter 入门'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你好，Flutter！',
              style: TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 20),
            Text(
              '你点击了 $_counter 次',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

步骤 5：体验热重载 ​

  1. 修改代码中的文本内容，如将 "你好，Flutter！" 改为 "Hello Flutter！"
  2. 保存文件（Ctrl+S）
  3. 观察模拟器/真机上的变化，无需重新编译

步骤 6：理解代码结构 ​

  • main()：程序入口，调用 runApp() 启动应用
  • MyApp：根组件，配置应用主题和首页
  • MyHomePage：首页组件，包含状态管理和UI布局
  • _MyHomePageState：首页的状态类，管理计数器状态
  • setState()：更新状态，触发UI刷新

1.8 小结 ​

本章介绍了 Flutter 的基本概念、优势、应用场景以及与其他框架的区别，同时回顾了学习 Flutter 所需的 Dart 基础，并提供了详细的学习路线规划。最后，通过创建第一个 Flutter 程序，体验了热重载的便捷性，为后续的学习打下了基础。

在接下来的章节中，我们将详细学习 Flutter 的开发环境搭建、项目结构、核心概念、基础组件、布局开发、状态管理等内容，逐步掌握 Flutter 开发技能。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建