Flutter资源下载插件asset_downloader的使用

Flutter资源下载插件asset_downloader的使用

概述

AssetDownloader 是一个为 Flutter 设计的插件，用于高效地下载、保存和利用各种类型的文件或资源。

如何使用

在使用 AssetDownloader 插件之前，需要通过调用 initialize() 方法进行初始化：

await AssetDownloader.initialize();

初始化之后，可以使用 CachedAssetWidget 来加载资源。例如：

CachedAssetWidget(
  url: 'https://example.com/image.png',
  /// fileName 参数是可选的，但如果有需要可以指定文件名
  fileName: 'abc.jpg', 
  builder: (context, file) {
    return Image.file(file);
  },
  placeholder: (context) {
    return CircularProgressIndicator();
  },
);

关键特性

开箱即用

AssetDownloader 包含了一个 CachedAssetWidget，使得集成变得非常简单，只需传递所需文件的 URL 即可。

手动预下载

允许手动排队预下载，以便应用程序提前获取资源以供将来使用。可以使用 enqueueDownloadTask 方法来实现这一点。

AssetDownloader.enqueueDownloadTask(
  url: 'https://example.com/image.png',
  fileName: 'abc.jpg',
);

自动删除未使用的文件

为了防止不必要的存储空间占用，该插件包含了一个清理机制，可以自动删除未使用的文件。

可配置的过期时间和容量

在初始化时，用户可以指定总的允许过期时间。如果某个文件在这段时间内未被使用，则会在清理过程中被标记为待删除。

同时，也可以设置总容量，定义允许的最大下载数量。如果下载的文件超过了设定的容量，最不常使用的文件将被移除。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 AssetDownloader 插件下载并显示图像和视频。

import 'dart:io';

import 'package:asset_downloader/asset_downloader.dart';
import 'package:example/video_player_with_placeholder.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const ExampleAssetDownloaderScreen();
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
          future: AssetDownloader.initialize(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return const SafeArea(
                  child: Column(
                children: [
                  ExampleVideoADMWidget(),
                  SizedBox(
                    height: 16,
                  ),
                  ExampleImageADMWidget(),
                  SizedBox(
                    height: 16,
                  ),
                ],
              ));
            }
            return const Center(child: CircularProgressIndicator());
          }),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CachedAssetWidget(
      placeholder: (context) {
        return const SizedBox(
          width: 200,
          height: 200,
          child: Center(
            child: Text('This is a placeholder'),
          ),
        );
      },
      url:
          "https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
      builder: (BuildContext context, File file) {
        return SizedBox(
          width: 200,
          height: 200,
          child: Image.file(file),
        );
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CachedAssetWidget(
      placeholder: (context) {
        return const SizedBox(
          width: 200,
          height: 200,
          child: Center(
            child: Text(
              'This is a downloader placeholder',
              textAlign: TextAlign.center,
            ),
          ),
        );
      },
      url:
          "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      builder: (BuildContext context, File file) {
        return SizedBox(
            width: 200,
            height: 200,
            child: VideoPlayerWithPlaceholder(
              placeholderWidget:
                  const Center(child: Text('Initializing video')),
              file: file,
              videoAsset: '',
              isFile: true,
              startDelay: const Duration(seconds: 1),
            ));
      },
    );
  }
}