【Flutter入门】1. 从零开始的flutter跨平台开发之旅（概述、环境搭建、第一个Flutter应用）

bcbnb
155 阅读10分钟

前言

随着移动互联网的发展，跨平台开发已经成为一个不可忽视的技术方向。本文将带领读者从零开始学习Flutter，循序渐进地掌握这个强大的跨平台开发框架。截至2024年12月，Flutter已经发展到了3.27版本。在学习和使用的过程中，我发现国内现在网上可以找到的Flutter相关文章教程等并不多，且很多都是比较过时的。因此，我计划从2025年开始，分享自己平时做的笔记以及工作上积累的经验，希望能对正在学习或使用Flutter的同学有所帮助。同时，我也希望通过写作来磨练自己的技术。由于技术写作经验有限，文中可能存在逻辑表达不清、字词错误、代码错误或格式错误等问题，欢迎读者在评论区或私信中指出，以便及时修正优化，非常感谢！

Flutter概述

什么是Flutter？

Flutter是Google推出的一个开源UI工具包，它彻底改变了我们对跨平台开发的认知。不同于传统的跨平台框架，Flutter采用了自绘引擎Skia图形引擎，不依赖原生控件，这使得它可以完全控制渲染流程，保证多平台UI一致性，并提供更好的动画性能表现。此外，Flutter支持AOT（Ahead Of Time）编译，直接编译成原生代码，从而实现启动速度快、运行时性能好、内存占用小等优点。同时，Flutter还支持iOS、Android、Web、Windows、macOS和Linux等多个平台，并提供了亚秒级的热重载功能，大大提升了开发效率。

AOT与JIT编译

Flutter根据不同场景使用两种编译模式：

  • AOT (Ahead Of Time) 编译：在应用发布前将Dart代码预编译为本地机器码，主要用于Release模式下的生产环境发布。这种方式能保证运行性能好、无需运行时编译、启动速度快、内存占用小。
  • JIT (Just In Time) 编译：在运行时动态将Dart代码编译为机器码，主要用于Debug模式下的开发环境。它支持热重载(Hot Reload)，方便调试和提高开发效率。

Flutter巧妙地结合了这两种编译模式的优势：开发时使用JIT提供流畅的开发体验；发布时使用AOT确保最佳性能。

为什么选择Flutter？

在众多跨平台方案中，Flutter具有显著优势，包括但不限于：

  • 开发效率：热重载支持、丰富的Widget库、完善的开发工具、统一的代码库。
  • 性能表现：接近原生的性能、流畅的60fps动画、优秀的渲染性能、较小的安装包体积。
  • 生态系统：活跃的开发者社区、丰富的第三方包、完善的文档支持、企业级支持。
  • 学习曲线：简洁的Dart语言、声明式UI设计、统一的开发模式、完整的学习资源。

Flutter vs 其他框架对比

特性FlutterReact NativeUni-app
渲染引擎Skia自绘引擎JSCore + 原生桥接V8/JSCore + WebView
渲染性能接近原生接近原生(部分损耗)依赖浏览器
动画性能60fps稳定部分场景丢帧依赖设备性能
首屏加载较快需要JS引擎预热需要WebView初始化
学习曲线中等较低（如熟悉React）较低
生态系统快速成长成熟稳定完善
热重载支持支持支持
包大小较大较小中等
使用场景全平台应用移动端应用为主偏向小程序
中文社区一般活跃活跃
开发语言DartJavaScriptJavaScript/Vue
上手难度中等较易较易
调试工具完善完善一般
跨平台性优秀良好优秀

Flutter应用场景

商业应用案例

  • 电商应用：阿里巴巴闲鱼，日活用户超过3000万，首屏加载时间小于1秒，开发效率提升50%。
  • 社交应用：腾讯微视，视频播放性能接近原生，跨平台代码复用率大于95%。
  • 金融应用：工商银行，交易模块性能达到原生水平，开发周期缩短40%。
  • 生活服务：美团外卖，用户体验显著提升，研发效率大幅提高。

技术特点

  • 高性能渲染：自绘引擎保证性能，GPU加速渲染，智能图层管理。
  • 快速开发迭代：毫秒级热重载，丰富的调试工具，自动化测试支持。
  • 优秀的动画支持：内置动画库，自定义动画支持，硬件加速。

适用场景

  • 需要快速开发的项目
  • 要求高性能的应用
  • 需要精美UI的产品
  • 跨平台一致性要求高的场景

开发环境搭建

系统要求

Windows环境
  • 操作系统：Windows 10（推荐）或Windows 7 SP1（最低要求），64位操作系统（必需），开启Hyper-V（Windows 10 Pro以上版本）。
  • 硬件要求：CPU需支持虚拟化技术，内存建议8GB以上（推荐16GB），存储至少10GB可用空间。
  • 开发工具：Git for Windows 2.x, PowerShell 5.0+, Android Studio（推荐）或VS Code, Android开发环境（JDK 8或更高版本，Android SDK Platform 29或更高版本，Android SDK Command-line Tools）。
macOS环境
  • 操作系统：macOS 10.15 (Catalina)或更高版本，建议使用最新版本以获得最佳性能。
  • 硬件要求：CPU：Intel或Apple Silicon，内存建议16GB，存储至少15GB可用空间。
  • 开发工具：Xcode 13或更高版本（iOS开发必需），Android Studio或VS Code, CocoaPods（iOS依赖管理），iOS开发要求：Apple Developer账号，iOS Simulator或真机设备。

Flutter SDK安装

Windows详细步骤
# 创建开发目录
mkdir C:\src
cd C:\src

# 下载Flutter SDK
git clone https://github.com/flutter/flutter.git -b stable

# 添加Flutter到系统环境变量
setx PATH "%PATH%;C:\src\flutter\bin"

# 验证安装
flutter --version

# 检查环境变量是否生效
echo %PATH%

# 验证Flutter环境
flutter doctor -v

# 解决常见问题
flutter doctor --android-licenses

# 检查配置
flutter doctor
macOS详细步骤
# 使用Homebrew安装
brew install --cask flutter

# 配置环境变量
# 添加到 ~/.zshrc 或 ~/.bash_profile
export PATH="$PATH:`pwd`/flutter/bin"

# iOS开发配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license

开发工具配置

Android Studio配置
  • 插件安装：Flutter插件, Dart插件, Flutter Snippets, Flutter Enhancement Suite。
  • SDK配置：Preferences > Languages & Frameworks > Flutter，设置Flutter SDK路径。
  • 模拟器配置：
# 创建模拟器
flutter emulators --create

# 启动模拟器
flutter emulators --launch <emulator_id>
VS Code配置
  • 必要插件：Flutter, Dart, Flutter Widget Snippets, Awesome Flutter Snippets。
  • 配置设置：
{
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "dart.previewFlutterUiGuides": true
}

Flutter实战：Todo List应用

项目概述

在学习了Flutter的核心概念后，我们将创建一个待办事项应用来实践这些知识，包括使用StatelessWidget和StatefulWidget感受Widget生命周期管理、应用状态管理、处理用户输入、实现数据持久化等功能。

创建项目

# 创建新项目
flutter create todo_list

# 进入项目目录
cd todo_list

# 运行项目
flutter run

项目结构解析

todo_list/
├── android/          # Android平台相关代码
├── ios/             # iOS平台相关代码
├── lib/             # Flutter源代码
│   └── main.dart    # 入口文件
├── test/            # 测试文件
└── pubspec.yaml     # 项目配置文件

基本代码解释

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: 'Todo List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const TodoListPage(),
    );
  }
}

定义数据模型

// lib/models/todo_item.dart
class TodoItem {
  final String id;
  final String title;
  bool isCompleted;

  TodoItem({
    required this.id,
    required this.title,
    this.isCompleted = false,
  });

  // 用于JSON序列化
  Map<String, dynamic> toJson() => {
    'id': id,
    'title': title,
    'isCompleted': isCompleted,
  };

  // 从JSON创建实例
  factory TodoItem.fromJson(Map<String, dynamic> json) => TodoItem(
    id: json['id'],
    title: json['title'],
    isCompleted: json['isCompleted'],
  );
}

实现主页面

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:todo_list/models/todo_item.dart';

/// 应用程序入口点
void main() {
  runApp(const MyApp());
}

/// 自定义无状态小部件，代表整个应用程序
class MyApp extends StatelessWidget {
  /// 构造函数，接收一个可选的key参数
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 返回MaterialApp小部件，配置应用程序的基本设置
    return MaterialApp(
      title: 'Todo List', // 设置应用程序标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置主题颜色
        useMaterial3: true, // 使用Material Design 3样式
      ),
      home: const TodoListPage(), // 设置主页面为TodoListPage
    );
  }
}

/// 自定义有状态小部件，表示待办事项列表页面
class TodoListPage extends StatefulWidget {
  /// 构造函数，接收一个可选的key参数
  const TodoListPage({Key? key}) : super(key: key);

  @override
  State<TodoListPage> createState() => _TodoListPageState();
}

/// 管理TodoListPage的状态
class _TodoListPageState extends State<TodoListPage> {
  // 存储所有待办事项的列表
  final List<TodoItem> _items = [];

  // 创建一个文本控制器，用于管理输入框中的文本
  final _textController = TextEditingController();

  /// 添加新的待办事项
  void _addTodoItem(String title) {
    if (title.isEmpty) return; // 如果标题为空，则不添加

    setState(() {
      // 添加新的待办事项到列表中
      _items.add(TodoItem(
        id: DateTime.now().toString(), // 使用当前时间戳作为唯一标识符
        title: title,
      ));
    });
    // 清空输入框
    _textController.clear();
  }

  /// 切换待办事项的完成状态
  void _toggleTodoItem(String id) {
    setState(() {
      // 查找并切换指定ID的待办事项的完成状态
      final item = _items.firstWhere((item) => item.id == id);
      item.isCompleted = !item.isCompleted;
    });
  }

  /// 移除待办事项
  void _removeTodoItem(String id) {
    setState(() {
      // 从列表中移除指定ID的待办事项
      _items.removeWhere((item) => item.id == id);
    });
  }

  @override
  Widget build(BuildContext context) {
    // 返回Scaffold小部件，包含应用栏和主体内容
    return Scaffold(
      appBar: AppBar(
        title: const Text('Todo List'), // 设置应用栏标题
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _textController, // 绑定文本控制器
                    decoration: const InputDecoration(
                      hintText: '添加新的待办事项', // 设置输入框提示文本
                    ),
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.add), // 设置图标按钮的图标
                  onPressed: () => _addTodoItem(_textController.text), // 点击时调用添加方法
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _items.length, // 设置列表项数量
              itemBuilder: (context, index) {
                final item = _items[index];
                return ListTile(
                  leading: Checkbox(
                    value: item.isCompleted, // 设置复选框的状态
                    onChanged: (_) => _toggleTodoItem(item.id), // 状态变化时调用切换方法
                  ),
                  title: Text(
                    item.title, // 显示待办事项标题
                    style: TextStyle(
                      decoration: item.isCompleted
                          ? TextDecoration.lineThrough // 完成的事项加删除线
                          : null,
                    ),
                  ),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete), // 设置删除按钮的图标
                    onPressed: () => _removeTodoItem(item.id), // 点击时调用移除方法
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源，确保没有内存泄漏
    _textController.dispose();
    super.dispose();
  }
}

注意事项

  • 代码规范：使用flutter_lints保持代码风格一致，遵循Effective Dart指南，合理使用注释和文档字符串，保持代码模块化和可测试性。
  • 性能优化：使用const构造函数避免不必要的重建，合理使用StatefulWidget，优化图片资源。
  • 调试技巧：使用Flutter DevTools，推荐使用真机运行调试项目，利用性能分析工具，采用常见问题排查方法，制定日志管理策略。

参考资源

常见问题及解决方案

  • Android Studio卡顿
    • 增加Android Studio内存：修改studio64.exe.vmoptions文件，增加内存至4096m或更多。
  • Flutter SDK下载慢
    • 使用国内镜像：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • iOS模拟器问题
    • 重置模拟器：
xcrun simctl erase all
  • 依赖安装失败
    • 在pubspec.yaml中指定版本：
dependencies:
  package_name: ^x.y.z

使用AppUploader简化iOS应用发布流程

在开发完Flutter应用后，发布到App Store是一个重要的步骤。为了简化这一过程，推荐使用AppUploader，这是一款专为iOS开发者设计的工具，能够帮助开发者快速上传应用、管理证书和配置文件，并自动处理繁琐的发布流程。通过AppUploader，开发者可以节省大量时间，专注于应用的开发和优化。

本篇文章到这就差不多啦~
如有疑问欢迎评论区讨论或者私信

avatar
文章
阅读
粉丝