Flutter媒体缓存管理插件media_cache_manager的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter媒体缓存管理插件media_cache_manager的使用

media_cache_manager 是一个用于在Flutter应用中管理和缓存媒体文件(如音频、视频、图片等)的插件。它支持永久或指定时间内缓存文件,提供加密和解密功能,并能处理下载状态(成功、失败、取消、加密中、解密中等)。本文将详细介绍如何使用这个插件,并提供完整的示例代码。

安装

首先,在 pubspec.yaml 文件的依赖项中添加 media_cache_manager

dependencies:
  media_cache_manager: 

对于Android项目,需要在 android/app/build.gradle 中进行一些额外配置:

defaultConfig {
    multiDexEnabled true
    minSdkVersion 20
}

初始化插件

在应用启动时初始化插件是必须的步骤。可以在 main() 函数中执行此操作:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MediaCacheManager.instance.init(
    encryptionPassword: 'i love flutter', // 可选参数:设置加密密码
    daysToExpire: 1, // 可选参数:设置过期天数
  );
  runApp(const MyApp());
}

基本用法

简单示例

以下是一个简单的例子,展示了如何使用 DownloadMediaBuilder 小部件来加载和显示一张图片:

DownloadMediaBuilder(
  url: 'https://example.com/path/to/image.jpg',
  onSuccess: (snapshot) {
    return Image.file(File(snapshot.filePath!));
  },
  onLoading: (snapshot) {
    return LinearProgressIndicator(value: snapshot.progress);
  },
)

处理自动下载

默认情况下,DownloadMediaBuilder 会自动开始下载资源。如果你想禁用这一行为,可以通过设置 autoDownload 属性为 false 来实现,并且可以手动触发下载:

late DownloadMediaBuilderController controller;

DownloadMediaBuilder(
  url: 'https://example.com/path/to/video.mp4',
  autoDownload: false,
  onInitialize: (ctrl) => this.controller = ctrl,
  onInitial: (snapshot) {
    return ElevatedButton(
      onPressed: controller.getFile,
      child: const Text('Load file'),
    );
  },
  onSuccess: (snapshot) {
    return BetterPlayer.file(snapshot.filePath!);
  },
  onLoading: (snapshot) {
    return LinearProgressIndicator(value: snapshot.progress);
  },
)

处理错误与重试

当遇到下载失败的情况时,你可以通过 onError 回调来处理错误,并给用户提供重新尝试的机会:

DownloadMediaBuilder(
  url: 'https://example.com/path/to/file.mp4',
  onError: (snapshot) {
    return Column(
      children: [
        const Center(child: Text('Error Occurred!')),
        ElevatedButton(
          onPressed: controller.retry,
          child: const Text('Retry'),
        ),
      ],
    );
  },
)

加密文件

如果你希望对下载后的文件进行加密保护,可以在 DownloadMediaBuilder 中传递 encryptionPassword 参数:

DownloadMediaBuilder(
  url: 'https://example.com/path/to/file.mp4',
  encryptionPassword: "this is a password",
  onSuccess: (snapshot) {
    return BetterPlayer.file(snapshot.filePath!);
  },
)

请注意,你需要妥善保存这些密码,因为插件不会为你存储它们。如果无法用提供的密码解密文件,则文件将会再次开始下载。

设置文件过期时间

你可以通过 setExpireDate 方法来定义文件的有效期限:

await MediaCacheManager.instance.setExpireDate(daysToExpire: 10);

这将使得所有未被访问超过10天的文件自动失效并被清除。

完整示例代码

下面是一个包含上述所有特性的完整应用程序示例:

import 'package:better_player/better_player.dart';
import 'package:flutter/material.dart';
import 'package:media_cache_manager/media_cache_manager.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MediaCacheManager.instance.init(
    encryptionPassword: 'i love flutter',
    daysToExpire: 1,
  );
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  late DownloadMediaBuilderController controller;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DownloadMediaBuilder(
              url: 'https://videos.pexels.com/video-files/4114797/4114797-uhd_2560_1440_25fps.mp4',
              encryptionPassword: "this is another password",
              autoDownload: false,
              onInitialize: (controller) => this.controller = controller,
              onInitial: (snapshot) {
                return ElevatedButton(
                  onPressed: controller.getFile,
                  child: const Text("Load file"),
                );
              },
              onSuccess: (snapshot) {
                return BetterPlayer.file(snapshot.filePath!);
              },
              onLoading: (snapshot) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    LinearProgressIndicator(
                      value: snapshot.progress,
                    ),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: controller.cancelDownload,
                      child: const Text('Cancel Download'),
                    ),
                  ],
                );
              },
              onCancel: (snapshot) {
                return ElevatedButton(
                  onPressed: controller.retry,
                  child: const Text('Retry'),
                );
              },
              onDecrypting: (snapshot) {
                return const Center(
                  child: Text('File is under decryption...'),
                );
              },
              onEncrypting: (snapshot) {
                return const Center(
                  child: Text('File is under encryption...'),
                );
              },
              onError: (snapshot) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const Center(child: Text('Error Occurred!')),
                    const SizedBox(height: 10),
                    ElevatedButton(
                      onPressed: controller.retry,
                      child: const Text('Retry'),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

这段代码展示了如何集成 media_cache_manager 插件到你的Flutter项目中,包括初始化、处理不同状态以及添加加密功能。根据实际需求调整URL和其他配置选项即可满足大多数场景下的使用要求。


更多关于Flutter媒体缓存管理插件media_cache_manager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter媒体缓存管理插件media_cache_manager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用media_cache_manager插件进行媒体缓存管理的代码示例。media_cache_manager是一个用于管理媒体文件缓存的Flutter插件,特别适用于视频和图像。

首先,确保你已经在pubspec.yaml文件中添加了media_cache_manager依赖:

dependencies:
  flutter:
    sdk: flutter
  media_cache_manager: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

以下是一个完整的示例,展示了如何使用media_cache_manager来缓存和获取媒体文件:

import 'package:flutter/material.dart';
import 'package:media_cache_manager/media_cache_manager.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Media Cache Manager Example'),
        ),
        body: Center(
          child: MediaCacheManagerExample(),
        ),
      ),
    );
  }
}

class MediaCacheManagerExample extends StatefulWidget {
  @override
  _MediaCacheManagerExampleState createState() => _MediaCacheManagerExampleState();
}

class _MediaCacheManagerExampleState extends State<MediaCacheManagerExample> {
  final MediaCacheManager _mediaCacheManager = MediaCacheManager(
    baseCacheDir: getTemporaryDirectory().path,
    maxCacheSize: 1024 * 1024 * 100, // 设置最大缓存大小为100MB
  );

  String? _cachedFilePath;

  void _downloadAndCacheMedia() async {
    String mediaUrl = "https://example.com/path/to/your/media/file.mp4"; // 替换为你的媒体文件URL
    try {
      String filePath = await _mediaCacheManager.getFile(mediaUrl);
      setState(() {
        _cachedFilePath = filePath;
      });
    } catch (e) {
      print("Error caching media: $e");
    }
  }

  void _clearCache() async {
    try {
      await _mediaCacheManager.clearCache();
      setState(() {
        _cachedFilePath = null;
      });
    } catch (e) {
      print("Error clearing cache: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _downloadAndCacheMedia,
          child: Text('Download and Cache Media'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _clearCache,
          child: Text('Clear Cache'),
        ),
        SizedBox(height: 20),
        if (_cachedFilePath != null)
          VideoPlayerWidget(filePath: _cachedFilePath!)
        else
          Text('No cached media available'),
      ],
    );
  }
}

class VideoPlayerWidget extends StatefulWidget {
  final String filePath;

  VideoPlayerWidget({required this.filePath});

  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late _ChewiePlayerController _chewieController;

  @override
  void initState() {
    super.initState();
    _chewieController = _ChewiePlayerController.fromVideoSource(
      MediaItem.video(widget.filePath),
      aspectRatio: widget.filePath.contains("mp4") ? 16 / 9 : 1,
      autoPlay: false,
      looping: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Chewie(
      controller: _chewieController,
    );
  }

  @override
  void dispose() {
    _chewieController.dispose();
    super.dispose();
  }
}

在这个示例中,我们做了以下几件事:

  1. 初始化MediaCacheManager实例,并设置缓存目录和最大缓存大小。
  2. 提供一个按钮来下载并缓存媒体文件,并更新UI以显示缓存文件的路径(如果成功)。
  3. 提供一个按钮来清除缓存。
  4. 使用Chewie库(你需要额外添加chewie依赖)来播放缓存的视频文件。

注意:

  • 你需要添加chewie依赖到你的pubspec.yaml文件中来播放视频。
  • 示例中的媒体URL需要替换为实际可用的媒体文件URL。
  • 示例中的错误处理较为简单,你可能需要根据实际需求进行更详细的错误处理。
dependencies:
  chewie: ^latest_version  # 请替换为最新版本号

希望这个示例能帮助你理解如何在Flutter项目中使用media_cache_manager插件进行媒体缓存管理。

回到顶部