Flutter仪表盘展示插件dashboard_module的使用

dashboard_module 是一个专门用于展示仪表盘的 Flutter 插件。本文将详细介绍如何在 Flutter 应用中使用该插件，并提供一个完整的示例代码。

开始使用

本项目是一个 Flutter 插件包的起点，包含 Android 和/或 iOS 的平台特定实现代码。

环境准备

确保你已经安装了 Flutter SDK 并且配置好了开发环境。你可以通过以下命令检查是否已正确安装 Flutter：

flutter doctor

创建项目

首先，创建一个新的 Flutter 项目：

flutter create dashboard_example
cd dashboard_example

添加依赖

在 pubspec.yaml 文件中添加 dashboard_module 依赖：

dependencies:
  flutter:
    sdk: flutter
  dashboard_module: ^1.0.0  # 请根据实际情况替换为最新版本号
  get: ^4.6.5  # 用于状态管理
  flutter_screenutil: ^5.0.0  # 用于适配屏幕

运行 flutter pub get 命令来获取这些依赖。

示例代码

以下是使用 dashboard_module 插件的完整示例代码。

main.dart

import 'package:dashboard_module/dashboard_page.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _dashboardModulePlugin = DashboardModule();

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中初始化
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用 try/catch 处理 PlatformException。
    // 我们还处理消息可能返回 null 的情况。
    try {
      platformVersion =
          await _dashboardModulePlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件从树中被移除而异步平台消息还在飞行中，我们希望丢弃回复而不是调用
    // setState 来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(375, 812),  // 设计尺寸基于 iPhone 6/7/8
      builder: (context, child) {
        return GetMaterialApp(
          home: DashboardPage(),
        );
      },
    );
  }
}

DashboardPage

在 lib 目录下创建 dashboard_page.dart 文件，并添加以下代码：

import 'package:flutter/material.dart';

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('仪表盘'),
      ),
      body: Center(
        child: Text('这是一个仪表盘页面！'),
      ),
    );
  }
}

运行应用

现在可以运行你的应用了：

flutter run