Flutter媒体选择与查看插件smart_media_picker_and_viewer的使用

简介

smart_media_picker_and_viewer 是一个多功能的 Flutter 插件，用于无缝选择和查看各种媒体类型，包括图片、PDF 和其他文件。该插件提供了可自定义的小部件，以增强您的 Flutter 应用程序中的媒体处理体验。

特性

• 媒体选择器：轻松选择文件、图片和文档，并具有可自定义的 UI。
• 媒体查看器：在应用内查看图片和 PDF 文件，内置支持。
• 可自定义：调整样式、颜色和其他 UI 元素以适应您的应用程序设计。
• 灵活支持：支持广泛的文件类型，并提供多种显示和交互选项。

截图

媒体选择器示例

媒体选择器示例 2

媒体查看器示例

媒体查看器示例 2

安装

在您的 pubspec.yaml 文件中添加 smart_media_picker_and_viewer：

dependencies:
  flutter:
    sdk: flutter
  smart_media_picker_and_viewer: ^0.0.1

然后运行：

flutter pub get

使用

要使用该插件，将其导入到您的 Dart 文件中：

import 'package:smart_media_picker_and_viewer/smart_media_picker_and_viewer.dart';

示例

以下是一个简单的示例，展示如何使用 SmartMediaPickerAndViewer 小部件：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:smart_media_picker_and_viewer/smart_media_picker_and_viewer.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Media Picker And Viewer',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const PackageView(),
    );
  }
}

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

  @override
  State<PackageView> createState() => _PackageViewState();
}

class _PackageViewState extends State<PackageView> {
  List<File> documentList = [];
  List<File> bankStatementList = [File("pdf")];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text("Smart Media Picker And Viewer"),
      ),
      body: Container(
        margin: const EdgeInsets.all(12),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              blurRadius: 12,
              color: Colors.black.withOpacity(.1),
              spreadRadius: 12,
            )
          ],
        ),
        child: ListView(
          children: [
            const Text(
              "Upload Documents",
              textAlign: TextAlign.start,
              style: TextStyle(color: Colors.black, fontSize: 15, height: 1.2),
            ),
            const SizedBox(height: 12),
            SmartMediaPickerAndViewer(
              list: documentList,
              isHideUploadButton: false,
              uploadButtonColor: Colors.blueGrey,
              uploadButtonTextStyle: const TextStyle(fontSize: 8, fontStyle: FontStyle.italic, color: Colors.blueGrey),
              mediaTextStyle: const TextStyle(fontSize: 8, fontStyle: FontStyle.italic, color: Colors.blueGrey),
              removeIconColor: Colors.red,
              removeIconSize: 20,
              buttonHeight: 80,
              buttonWidth: 60,
              buttonPadding: 0,
              mediaHeight: 80,
              mediaWidth: 60,
              onSelect: (list) {
                documentList = list;
              },
            ),
            const Divider(height: 50),
            const Text(
              "here you can pass your docs and view",
              textAlign: TextAlign.start,
              style: TextStyle(color: Colors.black, fontSize: 15, height: 1.2),
            ),
            const Text(
              "Your Documents",
              textAlign: TextAlign.start,
              style: TextStyle(color: Colors.black, fontSize: 15, height: 1.2),
            ),
            const SizedBox(height: 12),
            SmartMediaPickerAndViewer(
              list: bankStatementList,
              isHideUploadButton: true,
              mediaHeight: 80,
              mediaWidth: 60,
              maxLinesForName: 3,
              onSelect: (list) {
                documentList = list;
              },
            ),
          ],
        ),
      ),
    );
  }
}

自定义

您可以自定义 SmartMediaPickerAndViewer 小部件的各个方面：

上传按钮

• isHideUploadButton：隐藏或显示上传按钮。
• uploadButtonColor：设置上传按钮的颜色。
• uploadButtonTextStyle：自定义上传按钮的文本样式。
• uploadButtonIcon：使用自定义图标作为上传按钮。

媒体显示

• mediaTextStyle：自定义媒体项的文本样式。
• removeIconColor：设置移除图标的颜色。
• removeIconSize：调整移除图标的大小。
• buttonHeight，buttonWidth：自定义上传按钮的大小。
• mediaHeight，mediaWidth：自定义媒体项的大小。

其他

• maxLinesForName：控制媒体名称的行数。

额外信息

更多详细信息，请参阅 GitHub 仓库。

贡献

欢迎贡献！如果您遇到任何问题或有改进建议，请随时 提交问题 或提交拉取请求。

许可证

本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。