Flutter图片缩略图生成插件thumbnailer的使用

thumbnailer简介

thumbnailer 是一个Flutter插件，能够为图片、PDF和xlsx文件生成缩略图。以下是该插件的一些特性：

• 如果特定mime类型不支持缩略图生成，则返回来自FontAwesome的回退图标。
• 支持注册自定义mime类型处理器以实现动态扩展。
• 生成的缩略图（或回退图标）是Flutter小部件。
• 支持对结果缩略图进行自定义调整大小/样式。

在创建此插件时，pub.dev上没有可用的解决方案。

使用方法

要使用此插件，请将 thumbnailer 添加为依赖项到您的 pubspec.yaml 文件中。

dependencies:
  thumbnailer: ^latest_version # 替换为最新版本号

示例代码

下面是一个完整的示例应用程序，演示了如何使用thumbnailer插件。这个例子包括了不同的用法场景，如简单的缩略图生成、带有自定义样式的缩略图、针对不同文件类型的处理等。

import 'package:thumbnailer/thumbnailer.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

/// example app demonstrating thumbnailer plugin
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 添加自定义mime类型映射
    Thumbnailer.addCustomMimeTypesToIconDataMappings(<String, IconData>{
      'custom/mimeType': FontAwesomeIcons.key,
    });
  }

  final List<Tab> myTabs = <Tab>[
    const Tab(text: 'Icons'),
    const Tab(text: 'Images'),
    const Tab(text: 'Creation Strategies'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 10),
          child: DefaultTabController(
            length: myTabs.length,
            child: Scaffold(
              appBar: AppBar(title: TabBar(tabs: myTabs)),
              body: TabBarView(
                children: <Widget>[
                  // Icons tab content
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: GridView.count(
                      crossAxisCount: 2,
                      children: <Widget>[
                        Column(
                          children: const <Widget>[
                            Thumbnail(
                              mimeType: 'text/html',
                              widgetSize: 100,
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 7),
                              child: Text(
                                'simplest Thumbnail , only set necessary params (mimeType,widgetSize)',
                                overflow: TextOverflow.clip,
                                textAlign: TextAlign.center,
                              ),
                            ),
                          ],
                        ),
                        // 更多缩略图实例...
                      ],
                    ),
                  ),
                  // Images tab content
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: GridView.count(
                      crossAxisCount: 2,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Thumbnail(
                              dataResolver: () async {
                                return (await DefaultAssetBundle.of(context)
                                        .load('assets/samples/png-sample.png'))
                                    .buffer
                                    .asUint8List();
                              },
                              mimeType: 'image/png',
                              widgetSize: 100,
                            ),
                            const Padding(
                              padding: EdgeInsets.symmetric(horizontal: 7),
                              child: Text(
                                'png image',
                                overflow: TextOverflow.clip,
                                textAlign: TextAlign.center,
                              ),
                            ),
                          ],
                        ),
                        // 更多图像缩略图实例...
                      ],
                    ),
                  ),
                  // Creation Strategies tab content
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: GridView.count(
                      crossAxisCount: 1,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Thumbnail(
                              dataResolver: () async {
                                return (await DefaultAssetBundle.of(context)
                                        .load('assets/samples/png-sample.png'))
                                    .buffer
                                    .asUint8List();
                              },
                              mimeType: 'image/png',
                              widgetSize: 300,
                            ),
                            const Padding(
                              padding: EdgeInsets.symmetric(horizontal: 7),
                              child: Text(
                                'in basic implementation there are 3 creation strategies, 1st is for images',
                                overflow: TextOverflow.clip,
                                textAlign: TextAlign.center,
                              ),
                            ),
                          ],
                        ),
                        // 更多创建策略实例...
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

注意事项

• 添加自定义mime类型：通过 Thumbnailer.addCustomMimeTypesToIconDataMappings 方法可以添加新的mime类型及其对应的图标。
• 错误处理：可以通过设置 errorBuilder 属性来定义自定义的错误行为。
• 资源加载：示例中的 dataResolver 函数用于异步加载资源数据。这通常是从网络或本地存储中读取文件内容。

希望这个详细的示例能帮助您更好地理解和使用 thumbnailer 插件！如果您有任何问题或需要进一步的帮助，请随时提问。