Flutter文件选择插件fast_file_picker的使用

Flutter文件选择插件fast_file_picker的使用

fast_file_picker 是一个用于 Flutter 的快速文件选择器。为了实现最佳性能，它直接返回操作系统文件信息，不会执行任何文件复制或转换。它支持在所有平台上选择文件、文件夹和保存路径。部分基于 file_selector。

操作 iOS Android macOS Windows/Linux
选择文件 ✅ (名称/路径/URL) ✅ (名称/URI) ✅ (名称/路径/URL) ✅ (名称/路径)
选择文件夹 ✅ (名称/路径/URL) ✅ (名称/URI) ✅ (名称/路径/URL) ✅ (名称/路径)
选择保存路径 ⚠️ ⚠️ ✅ (名称/路径/URL) ✅ (名称/路径)
  • 对于每个操作，请遵循平台特定的说明。
  • ⚠️: 在iOS和Android上建议使用移动分享菜单来保存文件。

使用

前提条件

在macOS上，你需要添加以下密钥到权限中，以便macOS应用程序能够访问文件系统：

<key>com.apple.security.files.user-selected.read-write</key>
<true/>

FastFilePickerPath

由于 fast_file_picker 可以返回路径或URI或两者，结果被包装在 FastFilePickerPath 中：

class FastFilePickerPath {
  final String name;
  final String? path;
  final String? uri;
}

选择文件或多个文件

平台说明：

  • Windows / macOS / Linux: 使用Dart IO访问文件。
  • iOS: 首先调用 useAppleScopedResource 或 accessAppleScopedResource 获得访问权限，然后使用Dart IO访问文件。详情见 ‘Apple scoped resource’ 部分。
  • Android: 使用 saf_stream 进行文件读取或 saf_util 获取文件信息。
class FastFilePicker {
  /// 选择一个文件并返回一个 `FastFilePickerPath`。
  /// 如果用户取消选择，则返回 `null`。
  static Future<FastFilePickerPath?> pickFile();

  /// 选择多个文件并返回一个 `FastFilePickerPath` 列表。
  /// 如果用户取消选择，则返回 `null`。
  static Future<List<FastFilePickerPath>?> pickMultipleFiles();
}

示例：

final files = await FastFilePicker.pickMultipleFiles();
if (files == null) {
  setState(() {
    _output = '用户取消了选择';
  });
  return;
}

// 处理所选文件。
for (final file in files) {
  if (Platform.isIOS) {
    // 处理iOS文件。
    // 使用 `useAppleScopedResource` 请求文件访问。
    final hasAccess = await file.useAppleScopedResource((file) async {
      // 回调仅在访问被授予时调用。
      // 现在可以使用Dart的IO读取文件。
      final bytes = await File(file.path!).readAsBytes();
    });

    if (hasAccess != true) {
      debugPrint('无法访问文件');
    }
  } else if (file.uri != null && Platform.isAndroid) {
    // 处理Android文件。
    // 例如，使用 `saf_stream` 包读取文件。
    final bytes = await _safStream.readFileBytes(file.uri!);
  } else if (file.path != null) {
    // 处理Windows / macOS / Linux文件。
    final bytes = await File(file.path!).readAsBytes();
  }
}

选择文件夹

平台说明：

  • Windows / macOS / Linux: 使用Dart IO访问文件夹。
  • iOS: 首先调用 useAppleScopedResource 或 accessAppleScopedResource 获得访问权限，然后使用Dart IO访问文件夹。详情见 ‘Apple scoped resource’ 部分。
  • Android: 使用 saf_stream 进行文件夹内的文件I/O或 saf_util 进行文件夹操作。
class FastFilePicker {
  /// 选择一个文件夹并返回一个 `FastFilePickerPath`。
  /// 如果用户取消选择，则返回 `null`。
  ///
  /// `writePermission` 仅适用于Android。
  static Future<FastFilePickerPath?> pickFolder({required bool writePermission});
}

示例：

// 处理所选文件夹。
final folder = await FastFilePicker.pickFolder(writePermission: false);
if (folder == null) {
  setState(() {
    _output = '取消';
  });
  return;
}
if (Platform.isIOS) {
  // 处理iOS文件夹。

  // 使用 `useAppleScopedResource` 请求文件夹访问。
  final hasAccess = await folder
      .useAppleScopedResource((folder) async {
    // 回调仅在访问被授予时调用。
    // 你只能在 `[hasAccess]` 为真时访问文件夹。
    final subFileNames =
        (await Directory(folder.path!).list().toList())
            .map((e) => e.path);

    setState(() {
      _output =
          '文件夹: $folder\n\n子文件: $subFileNames';
    });
  });

  if (hasAccess != true) {
    setState(() {
      _output = '无法访问文件夹';
    });
  }
} else if (Platform.isAndroid && folder.uri != null) {
  // 处理Android文件夹。

  // 使用 `saf_util` 包列出文件夹内的文件。
  // 或者使用 `saf_stream` 包读取文件。
  final subFileNames = (await _safUtil.list(folder.uri!))
      .map((e) => e.name);

  setState(() {
    _output =
        '文件夹: $folder\n\n子文件: $subFileNames';
  });
} else if (folder.path != null) {
  // 处理Windows / macOS / Linux文件夹。
  final subFileNames =
      (await Directory(folder.path!).list().toList())
          .map((e) => e.path);

  setState(() {
    _output =
        '文件夹: $folder\n\n子文件: $subFileNames';
  });
}

选择保存路径

平台说明：

  • iOS / Android: 不支持。建议使用移动分享菜单保存文件。
  • Windows / macOS / Linux: 使用Dart IO处理保存路径。
class FastFilePicker {
  /// 选择保存文件的位置并返回一个 `String` 路径。
  /// 可以通过 `defaultName` 选项指定默认文件名。
  /// 如果用户取消选择，则返回 `null`。
  static Future<String?> pickSaveFile({String? defaultName});
}

示例：

final savePath = await FastFilePicker.pickSaveFile();
if (savePath == null) {
  setState(() {
    _output = '用户取消了选择';
  });
  return;
}
// 使用Dart IO处理保存路径。

Apple scoped resource

在iOS和macOS（如果你处理iCloud文件）中，需要请求文件或文件夹的访问权限才能访问它们。fast_file_picker 在 FastFilePickerPath 上提供了扩展方法来帮助你完成这些任务。即 accessAppleScopedResource 和 releaseAppleScopedResource。

final pickerResult = await FastFilePickerUtil.pickFile(); // 或 pickFolder。
if (pickerResult == null) {
  // 用户取消选择。
  return;
}
if (Platform.isIOS) {
  final hasAccess = await pickerResult.accessAppleScopedResource();
  try {
    if (hasAccess != true) {
      // 拒绝访问或不支持。
      return;
    }

    /** 访问文件或文件夹 */
  } finally {
    // 完成后始终释放访问权限。
    await pickerResult.releaseAppleScopedResource(hasAccess);
  }
}

还有一个快捷方法 useAppleScopedResource 将上述两个方法结合起来：

final pickerResult = await FastFilePickerUtil.pickFile(); // 或 pickFolder。
if (pickerResult == null) {
  // 用户取消选择。
  return;
}
if (Platform.isIOS) {
  // 这将自动在完成后释放访问权限。
  // 如果平台不受支持或访问被拒绝，回调将不会被调用。
  final hasAccess = await pickerResult.useAppleScopedResource((file) async {
    /** 访问被授权 */
    /** 处理资源 */
  });
  if (hasAccess != true) {
    // 拒绝访问或不支持。
    return;
  }
}

强制使用内部 file_selector 插件

如果你想强制使用内部 file_selector 插件，可以使用 useFileSelector: true：

final files = await FastFilePicker.pickMultipleFiles(useFileSelector: true);

完整示例代码

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:fast_file_picker/fast_file_picker.dart';
import 'package:saf_stream/saf_stream.dart';
import 'package:saf_util/saf_util.dart';

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

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

  // This widget is the root of your application.
  [@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> {
  final _safStream = SafStream();
  final _safUtil = SafUtil();

  String _output = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              OutlinedButton(
                  onPressed: () async {
                    final res = await FastFilePicker.pickFile();
                    if (res == null) {
                      setState(() {
                        _output = '取消';
                      });
                    } else {
                      await _readFiles([res]);
                    }
                  },
                  child: const Text('选择文件')),
              const SizedBox(height: 10),
              OutlinedButton(
                  onPressed: () async {
                    final files = await FastFilePicker.pickMultipleFiles();
                    if (files == null) {
                      setState(() {
                        _output = '取消';
                      });
                    } else {
                      await _readFiles(files);
                    }
                  },
                  child: const Text('选择多个文件')),
              const SizedBox(height: 10),
              OutlinedButton(
                  onPressed: () async {
                    try {
                      // 处理所选文件夹。
                      final folder = await FastFilePicker.pickFolder(
                          writePermission: false);
                      if (folder == null) {
                        setState(() {
                          _output = '取消';
                        });
                        return;
                      }
                      if (Platform.isIOS) {
                        // 处理iOS文件夹。

                        // 使用 `useAppleScopedResource` 请求文件夹访问。
                        final hasAccess =
                            await folder.useAppleScopedResource((folder) async {
                          // 回调仅在访问被授予时调用。
                          final subFileNames =
                              (await Directory(folder.path!).list().toList())
                                  .map((e) => e.path);

                          setState(() {
                            _output =
                                '文件夹: $folder\n\n子文件: $subFileNames';
                          });
                        });

                        if (hasAccess != true) {
                          setState(() {
                            _output = '无法访问文件夹';
                          });
                        }
                      } else if (Platform.isAndroid && folder.uri != null) {
                        // 处理Android文件夹。

                        // 使用 `saf_util` 包列出文件夹内的文件。
                        // 或者使用 `saf_stream` 包读取文件。
                        final subFileNames = (await _safUtil.list(folder.uri!))
                            .map((e) => e.name);

                        setState(() {
                          _output =
                              '文件夹: $folder\n\n子文件: $subFileNames';
                        });
                      } else if (folder.path != null) {
                        // 处理Windows / macOS / Linux文件夹。
                        final subFileNames =
                            (await Directory(folder.path!).list().toList())
                                .map((e) => e.path);

                        setState(() {
                          _output =
                              '文件夹: $folder\n\n子文件: $subFileNames';
                        });
                      }
                    } catch (err) {
                      setState(() {
                        _output = err.toString();
                      });
                    }
                  },
                  child: const Text('选择文件夹')),
              const SizedBox(height: 10),
              OutlinedButton(
                  onPressed: () async {
                    try {
                      final savePath = await FastFilePicker.pickSaveFile();
                      setState(() {
                        _output = savePath?.toString() ?? '取消';
                      });
                    } catch (err) {
                      setState(() {
                        _output = err.toString();
                      });
                    }
                  },
                  child: const Text('选择保存路径')),
              const SizedBox(height: 10),
              Text(_output),
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Future<void> _readFiles(List<FastFilePickerPath> files) async {
    try {
      String s = '';
      for (final file in files) {
        // 添加文件路径到输出。
        // ignore: use_string_buffers
        s += '文件: $file\n';

        if (Platform.isIOS) {
          // 处理iOS文件。
          // 使用 `useAppleScopedResource` 请求文件访问。
          final hasAccess = await file.useAppleScopedResource((file) async {
            // 回调仅在访问被授予时调用。
            // 现在可以使用Dart的IO读取文件。
            final bytes = await File(file.path!).readAsBytes();

            s += '字节: ${_formatBytes(bytes)}\n\n';
          });
          if (hasAccess != true) {
            s += '无法访问文件\n\n';
          }
        } else if (file.uri != null && Platform.isAndroid) {
          // 处理Android文件。
          // 例如，使用 `saf_stream` 包读取文件。
          final bytes = await _safStream.readFileBytes(file.uri!);

          s += '字节: ${_formatBytes(bytes)}\n\n';
        } else if (file.path != null) {
          // 处理Windows / macOS / Linux文件。
          final bytes = await File(file.path!).readAsBytes();

          s += '字节: ${_formatBytes(bytes)}\n\n';
        }
      }

      setState(() {
        _output = s;
      });
    } catch (err) {
      setState(() {
        _output = '错误: $err';
      });
    }
  }

  String _formatBytes(Uint8List bytes) {
    return '${bytes.length} 字节';
  }
}

更多关于Flutter文件选择插件fast_file_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文件选择插件fast_file_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用fast_file_picker插件来选择文件的代码示例。这个插件允许用户从设备的存储中选择文件，包括图片、视频、文档等。

首先，确保你已经在pubspec.yaml文件中添加了fast_file_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  fast_file_picker: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中按照以下步骤使用fast_file_picker插件：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:fast_file_picker/fast_file_picker.dart';
  1. 创建一个选择文件的按钮：
class FilePickerScreen extends StatefulWidget {
  @override
  _FilePickerScreenState createState() => _FilePickerScreenState();
}

class _FilePickerScreenState extends State<FilePickerScreen> {
  List<FilePickerFile> _files = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('File Picker Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () async {
              // 打开文件选择器
              List<FilePickerFile> result = await FilePicker.platform.pickFiles(
                type: FileType.any, // 可以选择任何类型的文件
                allowMultiple: true, // 允许选择多个文件
              );

              // 更新文件列表状态
              if (result != null) {
                setState(() {
                  _files = result;
                });
              }
            },
            child: Text('Select Files'),
          ),
          Expanded(
            child: _files.isEmpty
                ? Center(child: Text('No files selected'))
                : ListView.builder(
                    itemCount: _files.length,
                    itemBuilder: (context, index) {
                      FilePickerFile file = _files[index];
                      return ListTile(
                        title: Text(file.name),
                        subtitle: Text(file.path),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}
  1. 运行你的应用：

确保你的主文件（例如main.dart）中引入了FilePickerScreen并设置为首页：

import 'package:flutter/material.dart';
import 'file_picker_screen.dart'; // 假设你的文件名为file_picker_screen.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter File Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FilePickerScreen(),
    );
  }
}

这段代码展示了如何使用fast_file_picker插件来选择文件，并将选择的文件路径显示在屏幕上。你可以根据需要对代码进行修改，例如限制文件类型、处理选中的文件等。记得在实际项目中处理可能的异常和错误情况，以提高应用的健壮性。

回到顶部