Web Dashboard Flutter Package for HarmonyOS 使用指南

Web Dashboard是一款专为Web和HarmonyOS设计的Flutter仪表盘模板，提供自适应布局、数据可视化、认证系统（支持Firebase和mock模式）及数据持久化功能。开发者可通过Git引入依赖包，并选择mock或Firebase模式初始化应用。该模板采用模块化架构，包含AppState全局状态管理、DashboardApi数据操作接口和认证API，支持Google登录等功能。适

yaoyaoxingzhe

573人浏览 · 2025-12-20 17:11:40

yaoyaoxingzhe · 2025-12-20 17:11:40 发布

插件介绍

Web Dashboard是一个功能丰富的Flutter仪表盘应用模板，专为Web平台设计，现已适配HarmonyOS。该插件提供了一套完整的仪表盘解决方案，主要功能包括：

自适应布局系统：基于AdaptiveScaffold实现，支持大、中、小屏幕的自适应显示，完美适配HarmonyOS的各种设备尺寸
数据可视化：集成charts_flutter库，提供直观的数据图表展示功能
认证系统：支持Firebase Google登录和本地mock认证两种模式
数据持久化：可选择使用Firebase Cloud Firestore或本地mock数据进行数据存储
模块化架构：清晰的代码结构，便于扩展和定制

该插件采用Web-first设计理念，经过适配后可在HarmonyOS平台上流畅运行，为开发者提供了一个快速构建专业仪表盘应用的解决方案。

如何在鸿蒙上使用

1. 包的引入

由于这是一个自定义修改版本，需要通过Git形式引入。在你的HarmonyOS Flutter项目的pubspec.yaml文件中添加以下依赖配置：

dependencies:
  web_dashboard:
    git:
      url: "https://atomgit.com/"
      path: "packages/web_dashboard/web_dashboard"

2. 安装依赖

执行以下命令安装依赖：

flutter pub get

3. API调用与配置

初始化应用

Web Dashboard提供了两种初始化模式：使用Firebase的真实数据模式和使用mock数据的模拟模式。

使用Mock数据模式（推荐用于快速测试）

import 'package:flutter/material.dart';
import 'package:web_dashboard/src/app.dart';

void main() {
  runApp(DashboardApp.mock());
}

使用Firebase真实数据模式

import 'package:flutter/material.dart';
import 'package:web_dashboard/src/app.dart';

void main() {
  runApp(DashboardApp.firebase());
}

配置Firebase（可选）

如果选择使用Firebase模式，需要进行以下配置：

在web/index.html文件中添加Firebase配置：

<meta name="google-signin-client_id" content="<YOUR WEB CLIENT ID>">

<script>
  // Firebase配置
  var firebaseConfig = {
    apiKey: "<YOUR API KEY>",
    authDomain: "<YOUR AUTH DOMAIN>",
    projectId: "<YOUR PROJECT ID>",
    storageBucket: "<YOUR STORAGE BUCKET>",
    messagingSenderId: "<YOUR MESSAGING SENDER ID>",
    appId: "<YOUR APP ID>"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

配置Firestore规则：

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/{document=**} {
      allow read, update, delete: if request.auth.uid == userId;
      allow create: if request.auth.uid != null;
    }
  }
}

4. 鸿蒙平台适配

由于Web Dashboard是Web-first设计，在HarmonyOS上使用时需要进行一些适配：

主题适配

确保应用支持HarmonyOS的深色/浅色模式：

MaterialApp(
  theme: ThemeData.light(useMaterial3: true),
  darkTheme: ThemeData.dark(useMaterial3: true),
  themeMode: ThemeMode.system,
  // ...
)

权限处理

如果使用Firebase功能，需要在HarmonyOS配置文件中添加网络访问权限：

<!-- 在config.json中添加 -->
{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

CORS配置

在使用Firebase时，需要确保HarmonyOS应用的域名已添加到Firebase的CORS白名单中。

核心API说明

AppState类

管理应用全局状态，包含认证和API实例：

class AppState {
  final Auth auth;
  DashboardApi? api;
  AppState(this.auth);
}

DashboardApi接口

定义了仪表盘数据的基本操作：

abstract class DashboardApi {
  // 获取分类列表
  Future<List<Category>> getCategories();

  // 添加分类
  Future<void> addCategory(Category category);

  // 获取条目列表
  Future<List<Entry>> getEntries({
    Category? category,
    DateTime? startDate,
    DateTime? endDate,
  });

  // 添加条目
  Future<void> addEntry(Entry entry);

  // 更新条目
  Future<void> updateEntry(Entry entry);

  // 删除条目
  Future<void> deleteEntry(String id);
}

认证相关API

abstract class Auth {
  // 当前用户
  User? get currentUser;

  // 监听用户状态变化
  Stream<User?> authStateChanges();

  // Google登录
  Future<User> signInWithGoogle();

  // 匿名登录
  Future<User> signInAnonymously();

  // 登出
  Future<void> signOut();
}