Flutter可视化缓存插件visual_cache的使用

Visual Cache

Visual Cache 是一个用于轻松获取应用程序缓存大小的 Flutter 插件。Visual Cache 允许你以人类可读的格式（MB 或 GB）检索缓存大小，使其适用于在你的应用界面中显示与缓存相关的数据。

特性

• 实时缓存显示/更新。
• 获取 Flutter 应用程序的缓存大小。
• 显示以 MB 或 GB 为单位的缓存大小。
• 轻松集成并使用于任何 Flutter 应用。
• 可以添加自己的目录和颜色。
• 灵活的图表设置。

截图

开始使用

要使用 Visual Cache 插件，请遵循以下简单步骤：

安装

在你的 pubspec.yaml 文件中添加 Visual Cache 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  visual_cache: ^1.2.0

该插件仅在 Android 上测试过，但也可以在 iOS 上工作。

使用

以下是如何使用 Visual Cache 的示例代码：

// 导入包
import 'package:visual_cache/visual_widget.dart';

/// 显示缓存图表
VisualCache(
  /// '路径到子目录(文件夹)' : '自定义名称子目录'
  namedSubdirectories: {
    'NewFolder': 'Images',
    'NewFolder2': 'Videos',
    'NewFolder3': 'File',
  },
  /// 自定义子目录颜色
  colorSubdirectories: [
    Colors.amberAccent, // 图片颜色
    Colors.deepOrange, // 视频颜色
    Colors.deepPurpleAccent, // 文件颜色
    Colors.teal, // 如果你不希望它自动确定，则可以添加一个最终颜色用于“剩余缓存”
  ],
  showDirectoryName: true, // 启用/禁用显示目录名称
  isRealTime: true, // 启用/禁用实时缓存
  /// 自定义文本样式
  textStyle: TextStyle(
    color: Colors.black
  ),
)

示例代码

以下是从 GitHub 中提取的完整示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Visual cache demo v1.2.0',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.greenAccent),
        useMaterial3: true,
      ),
      home: const VisualCacheDemo(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Visual cache demo v1.2.0'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Cache size',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 70),
            VisualCache(
              /// '路径到子目录': '自定义名称子目录'
              namedSubdirectories: {
                'NewFolder': 'Images',
                'NewFolder2': 'Videos',
                'NewFolder3': 'File',
              },

              /// 自定义子目录颜色
              colorSubdirectories: [
                Colors.amberAccent, // 图片颜色
                Colors.deepOrange, // 视频颜色
                Colors.deepPurpleAccent, // 文件颜色
                Colors.teal, // 如果你不希望它自动确定，则可以添加一个最终颜色用于“剩余缓存”
              ],
              showDirectoryName: true, // 启用/禁用显示目录名称
              isRealTime: true, // 启用/禁用实时缓存
              /// 自定义文本样式
              textStyle: TextStyle(
                color: Colors.black
              ),
            )
          ],
        ),
      ),
    );
  }
}