欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

本文为鸿蒙6.0环境下的Flutter新手入门实践，基于校园通知公告项目，实现Flutter集成三方库开发鸿蒙应用。

一、文章前言

本项目基于 Flutter，适配鸿蒙6.0系统，通过集成常用三方库，实现一个功能完整的跨平台校园通知公告APP。

通过本项目，你将学到：

1. Flutter 项目鸿蒙6.0运行环境配置

2. Flutter 集成三方库（本地存储、图标、状态管理）

3. 鸿蒙6.0真机/模拟器运行Flutter项目

4. 完整校园通知公告增删改查功能实现

项目名称：Flutter鸿蒙校园通知公告APP（基于三方库实现本地持久化存储）

二、项目准备：环境检查

1. 安装 Flutter SDK（3.10及以上版本）

2. 安装 鸿蒙DevEco Studio（需支持鸿蒙6.0系统）

3. 开启鸿蒙6.0模拟器，或连接鸿蒙6.0真机

4. 配置Flutter支持鸿蒙平台（后续步骤会补充，此处先完成基础环境安装）

环境安装完成后，打开终端，执行以下命令检查环境是否正常：

flutter doctor

当终端输出中出现 [✓] HarmonyOS 字样，说明Flutter适配鸿蒙的环境配置正常，可以开始项目开发。

三、创建Flutter项目

步骤1：终端创建项目

打开终端，进入目标文件夹，执行以下命令创建项目（名称可自行修改）：

flutter create flutter_harmony_school_notice
cd flutter_harmony_school_notice

步骤2：启用鸿蒙平台

执行以下命令，启用Flutter对鸿蒙平台的支持并添加配置：

flutter config --enable-harmonyos
flutter create . --platforms=harmonyos

运行结果截图：

执行完成后，项目会自动生成鸿蒙平台相关的配置文件，无需手动修改。

步骤3：打开项目

用Android Studio或VS Code打开项目，等待加载完成。

四、集成三方库（核心步骤）

本项目集成3个常用Flutter三方库，覆盖核心需求，具体如下：

1. shared_preferences：轻量级本地持久化存储库，用于保存校园通知公告内容，实现“关闭APP后数据不丢失”

2. fluttertoast：轻量提示框库，用于添加、删除通知公告时的反馈提示

3. iconsax：精美图标库，用于按钮、通知列表的图标展示，提升界面美观度

步骤1：添加三方库依赖

在项目根目录的pubspec.yaml文件中，于dependencies节点下添加以下依赖（注意缩进与flutter sdk对齐）：

dependencies:
  flutter:
    sdk: flutter
  # 本地存储 三方库（用于保存校园通知）
  shared_preferences: ^2.2.2
  # 提示框 三方库（用于操作反馈）
  fluttertoast: ^8.2.2
  # 图标 三方库（用于界面图标展示）
  iconsax: ^0.0.8

步骤2：安装三方库

保存文件后，在终端执行以下命令安装三方库：

flutter pub get

终端输出“Process finished with exit code 0”，说明三方库安装成功；若出现报错，可检查依赖版本是否正确，或执行flutter pub upgrade 更新依赖。

五、完整项目代码（可直接复制使用）

核心代码位于lib/main.dart，以下为完整带注释代码，可直接复制替换：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart'; // 导入本地存储三方库
import 'package:fluttertoast/fluttertoast.dart'; // 导入提示框三方库
import 'package:iconsax/iconsax.dart'; // 导入图标三方库

// 程序入口（Flutter项目固定写法，所有代码从这里开始执行）
void main() {
  runApp(const MyApp());
}

// 根组件：整个APP的入口组件，是一个无状态组件（不需要动态刷新）
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp：Flutter的基础组件，提供APP的基础配置（标题、主题、首页等）
    return MaterialApp(
      title: 'Flutter鸿蒙校园通知', // APP标题（鸿蒙桌面显示的APP名称）
      theme: ThemeData(primarySwatch: Colors.blue), // APP主题色（蓝色，贴合校园风格）
      debugShowCheckedModeBanner: false, // 关闭调试标签（上线前必须关闭）
      home: const NoticeScreen(), // APP首页（校园通知列表页面）
    );
  }
}

// 主页面：校园通知列表页面，是一个有状态组件（需要动态刷新列表）
class NoticeScreen extends StatefulWidget {
  const NoticeScreen({super.key});

  @override
  State<NoticeScreen> createState() => _NoticeScreenState();
}

// 主页面状态类：处理页面的动态数据和交互逻辑
class _NoticeScreenState extends State<NoticeScreen> {
  // 存储所有校园通知的列表（字符串类型，每一个元素就是一条通知）
  List<String> noticeList = [];
  // 输入框控制器：用于获取输入框中的通知内容（添加通知时使用）
  final TextEditingController _noticeController = TextEditingController();

  // 初始化方法：页面启动时自动执行，用于加载本地存储的校园通知
  @override
  void initState() {
    super.initState();
    loadNotices(); // 调用加载通知的方法
  }

  // ———————— 核心：三方库 shared_preferences 读取本地数据 ————————
  // 异步方法（因为读取本地数据需要时间，不能阻塞页面渲染）
  Future<void> loadNotices() async {
    // 初始化shared_preferences实例（固定写法）
    final prefs = await SharedPreferences.getInstance();
    // 从本地存储中获取key为"notices"的数据，没有则返回空数组
    setState(() {
      noticeList = prefs.getStringList('notices') ?? [];
    });
  }

  // ———————— 核心：三方库 shared_preferences 保存数据到本地 ————————
  Future<void> saveNotices() async {
    final prefs = await SharedPreferences.getInstance();
    // 将通知列表保存到本地，key为"notices"（与读取时的key一致）
    await prefs.setStringList('notices', noticeList);
  }

  // 添加校园通知的方法（点击“加号”按钮时执行）
  void addNotice() {
    // 判断输入框内容是否为空（去除空格后判断）
    if (_noticeController.text.trim().isEmpty) {
      // 三方库 fluttertoast 弹出提示：请输入通知内容
      Fluttertoast.showToast(msg: "请输入通知内容");
      return; // 为空则不执行后续操作
    }

    // 刷新页面状态，将输入框内容添加到通知列表
    setState(() {
      noticeList.add(_noticeController.text.trim());
    });

    saveNotices(); // 调用保存方法，将新的通知列表保存到本地
    _noticeController.clear(); // 清空输入框
    Fluttertoast.showToast(msg: "通知添加成功"); // 弹出添加成功提示
  }

  // 删除校园通知的方法（点击垃圾桶图标时执行，传入当前通知的索引）
  void deleteNotice(int index) {
    setState(() {
      noticeList.removeAt(index); // 根据索引删除对应的通知
    });
    saveNotices(); // 保存删除后的通知列表
    Fluttertoast.showToast(msg: "通知删除成功"); // 弹出删除成功提示
  }

  // 构建页面UI（页面的所有布局和组件都在这里编写）
  @override
  Widget build(BuildContext context) {
    // Scaffold：基础页面容器，包含导航栏、主体内容等
    return Scaffold(
      // 导航栏（顶部标题栏）
      appBar: AppBar(
        title: const Text("Flutter × 鸿蒙6.0 校园通知公告"), // 导航栏标题
        centerTitle: true, // 标题居中
      ),
      // 主体内容（ Padding 用于设置内边距，避免内容贴边）
      body: Padding(
        padding: const EdgeInsets.all(16.0), // 上下左右各16像素内边距
        child: Column(
          // 垂直排列组件（输入框+列表）
          children: [
            // 输入框 + 添加按钮（水平排列）
            Row(
              children: [
                // Expanded：让输入框占满剩余空间（与按钮并排时常用）
                Expanded(
                  child: TextField(
                    controller: _noticeController, // 绑定输入框控制器
                    decoration: const InputDecoration(
                      hintText: "输入校园通知内容...", // 输入提示文字（贴合校园场景）
                      border: OutlineInputBorder(), // 输入框边框
                    ),
                  ),
                ),
                const SizedBox(width: 10), // 输入框和按钮之间的间距（10像素）
                // 添加按钮（使用三方库 iconsax 的加号图标）
                ElevatedButton(
                  onPressed: addNotice, // 点击按钮执行addNotice方法
                  child: const Icon(Iconsax.add, size: 20), // 加号图标，大小20
                ),
              ],
            ),

            const SizedBox(height: 20), // 输入框和列表之间的间距（20像素）
            // 校园通知列表（Expanded：让列表占满剩余空间，避免溢出）
            Expanded(
              child: noticeList.isEmpty
                  // 列表为空时，显示提示文字
                  ? const Center(child: Text("暂无校园通知，快去添加吧~"))
                  // 列表不为空时，渲染通知列表
                  : ListView.builder(
                      itemCount: noticeList.length, // 列表项数量 = 通知数量
                      // 构建每一个列表项（index：当前列表项的索引）
                      itemBuilder: (context, index) {
                        return Card(
                          margin: const EdgeInsets.only(bottom: 8), // 每个卡片的底部间距
                          child: ListTile(
                            leading: const Icon(Iconsax.notification, color: Colors.blue), // 通知图标（贴合校园场景）
                            title: Text(noticeList[index]), // 显示通知内容
                            // 右侧垃圾桶图标（删除按钮）
                            trailing: IconButton(
                              icon: const Icon(Iconsax.trash, color: Colors.red),
                              onPressed: () => deleteNotice(index), // 点击执行删除方法
                            ),
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

六、鸿蒙6.0运行步骤（超详细，新手必看）

步骤1：打开鸿蒙6.0模拟器

1. 打开DevEco Studio；

2. 点击顶部菜单栏的 Tools → Device Manager（设备管理器）；

3. 在设备管理器中点击新建，选择设备类型为Phone；

4. 选择系统版本为HarmonyOS 6.0；

5. 点击启动，等待模拟器启动。

步骤2：运行Flutter项目

1. 确保项目加载完成；

2. 终端切换至项目根目录；

3. 执行以下命令，将项目运行到鸿蒙设备：

flutter run -d harmony

命令执行后，Flutter会自动编译并安装APP，完成后可直接查看效果。
注意：如果出现新增的中文字符显示正常 ，硬编码的中文字符（标题、提示文字）仍然是乱码 如下图：

问题出在： Flutter 资源打包位置不一致
flutter build bundle 生成的资源在 build/flutter_assets/
DevEco Studio 使用的是 ohos/entry/src/main/resources/rawfile/flutter_assets/
这两个目录的资源不同步，导致旧的乱码资源被使用。

七、功能说明（运行后可直接测试）

项目运行后，可测试以下核心功能（均基于三方库实现）：

1. 添加通知：在输入框中输入校园通知内容，点击右侧加号按钮，即可添加一条通知，同时弹出“通知添加成功”提示；

2. 删除通知：点击每条通知右侧的红色垃圾桶图标，即可删除该通知，同时弹出“通知删除成功”提示；

3. 持久化存储：关闭APP后重新打开，之前添加的校园通知不会丢失（由shared_preferences三方库实现）；

4. 空内容提示：若输入框为空，点击加号按钮，会弹出“请输入通知内容”提示（由fluttertoast三方库实现）；

5. 精美图标：添加按钮、通知图标、删除按钮均来自iconsax三方库，界面简洁美观，贴合校园场景。

八、核心知识点总结（新手必看）

通过本项目，重点掌握以下核心知识点：

1. Flutter + 鸿蒙6.0 适配：通过简单的命令配置，即可让Flutter项目运行在鸿蒙6.0系统上，实现“一套代码，多端运行”；

2. 三方库集成：这是Flutter开发核心能力，掌握后可应对大部分基础需求：

3. 状态管理：使用 setState 方法实现页面动态刷新，当校园通知列表发生变化（添加、删除）时，页面会自动更新；

4. 持久化存储：通过shared_preferences三方库，实现校园通知数据本地保存，解决“APP重启后数据丢失”的问题。

补充说明

1. 若运行报错“鸿蒙设备未找到”，检查模拟器是否启动，或执行flutter devices查看设备；

2. 三方库版本可按需更新，出现兼容问题可降至本文指定版本；

3. 本项目可作为入门练手项目，后续可扩展通知编辑、分类、搜索等校园实用功能。