Flutter文件选择插件forme_file_picker的使用

Flutter文件选择插件forme_file_picker的使用

FormeFileGrid

这个插件仅提供了移动、排序和展示已选文件的功能。你必须自行实现文件选择功能，可以使用file_picker或其他插件来完成。

示例

示例页面

截图

使用方法

FormeFileGrid({
  Duration? animateDuration, /// 动画持续时间，默认为150毫秒
  int? maximum, /// 可容纳的最大文件数量，空表示无限制，默认为空
  required SliverGridDelegate gridDelegate, /// 必须提供一个SliverGridDelegate
  InputDecoration? decoration, /// 输入框装饰
  bool showFilePickerWhenReadOnly = true, // 是否在只读模式下显示选择器，默认为true
  bool disableFilePicker = false, // 是否始终禁用文件选择器，默认为false
  Color? filePickerColor, // 选择器的颜色，默认为Colors.grey.withOpacity(0.3)
  Color? filePickerDisabledColor, // 选择器禁用时的颜色，默认为主题禁用颜色
  Widget? filePickerChild, // 选择器内的子组件，默认为添加图标
  bool showGridItemRemoveWidget = true, // 是否在网格项上显示删除图标，默认为true
  Curve? slideCurve, // 滑动动画曲线
  /// 当缩略图创建失败或图像加载失败时构建的部件
  Widget Function(
      BuildContext context,
      FormeFile item,
      VoidCallback retry,
      Object error,
      StackTrace? stackTrace)? imageLoadingErrorBuilder,
  BoxFit imageFit = BoxFit.cover, // 图像填充方式，默认为覆盖
  bool Function(FormeFile, int)? removable, // 文件或索引是否可移除，默认可以移除
  bool Function(FormeFile, int)? draggable, // 文件或索引是否可拖动，默认可拖动
  Duration? longPressDelayStartDrag, // 长按开始拖动的延迟，默认为500毫秒
  Widget Function(BuildContext, FormeFile, int, Widget)? childWhenDraggingBuilder, // 拖动时的子组件构建器
  Widget Function(BuildContext, FormeFile, int, Widget, Size?)? feedbackBuilder, // 拖动时的反馈构建器
  bool reOrderable = true, // 文件是否可通过拖动重新排序，默认为true
  Widget Function(
    BuildContext context,
    FormeFile item,
    Widget child,
    ImageChunkEvent? loadingProgress,
    bool isImageLoaded,
  )? imageLoadingBuilder, // 加载进度构建器
  ValueChanged<FormeFile>? onGridItemTap, // 网格项点击回调
  OnFileUploadSuccess? onUploadSuccess, // 上传成功回调
  ONFileUploadFail? onUploadFail, // 上传失败回调
  void Function(FormeFileGridState state, int? maximum) pickFiles, // 选择文件回调
  Widget Function(FormeFileGridState state)? filePickerBuilder, // 文件选择器构建器
  /// 缩略图正在生成时构建的部件
  Widget Function(
    BuildContext context,
    FormeFile item,
  )? thumbnailLoadingBuilder,
  /// 默认为BoxDecoration(color: Colors.black.withOpacity(0.3))
  BoxDecoration? uploadBackgroundDecoration,
  IconData? uploadErrorIconData, // 上传错误图标
  IconData? uploadIconData, // 上传图标
  Color? uploadErrorIconColor, // 上传错误图标颜色
  Color? uploadIconColor, // 上传图标颜色
  Widget? gridItemRemoveWidget, // 网格项删除图标
})

FormeFile

abstract class FormeFile {
  Future<ImageProvider> get thumbnail; /// 获取文件缩略图
}

UploadableFormeFile

abstract class UploadableFormeFile<T> extends FormeFile {
  Future<T> upload(); /// 上传文件
  /// 如果你的上传可以取消，重写此方法
  void cancelUpload() {}

  bool get autoUpload => false; // 是否自动上传
}

完整示例代码

import 'package:flutter/material.dart';
import 'package:forme/forme.dart';
import 'package:file_picker/file_picker.dart'; // 引入file_picker插件

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  FormeKey key = FormeKey();
  
  List<PlatformFile> selectedFiles = []; // 存储选择的文件列表

  // 选择文件的方法
  void pickFiles() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(allowMultiple: true);
    if (result != null) {
      setState(() {
        selectedFiles = result.files;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: pickFiles,
              child: Text('选择文件'),
            ),
            FormeFileGrid(
              key: key,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              pickFiles: (state, max) {
                pickFiles();
              },
              filePickerBuilder: (state) {
                return ElevatedButton(
                  onPressed: () {
                    pickFiles();
                  },
                  child: Text('选择文件'),
                );
              },
              onGridItemTap: (file) {
                print("Selected file: ${file.name}");
              },
            ),
          ],
        ),
      ),
    );
  }
}