Flutter文件选择插件lean_file_picker的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter文件选择插件lean_file_picker的使用

Lean File Picker 是一个用于Flutter应用程序中选择文件的插件,它通过原生文件浏览器来选择单个文件。与现有的file_picker插件相比,lean_file_picker在iOS平台上提供了更小的应用程序安装包大小和更低的内存消耗,因为它不需要使用框架(即不需要use_frameworks!)进行构建,并且减少了依赖项的数量。

Motivation

  • 减少应用体积lean_file_picker帮助将一个应用从81.3MB减少到31.3MB,节省了超过50MB的空间。
  • 优化资源利用:对于只需要原生文件选择器行为的应用来说,lean_file_picker是一个更好的选择,特别是在iOS上,它可以显著降低内存占用。

Usage

基本用法

要使用lean_file_picker,首先需要导入相应的包:

import 'package:lean_file_picker/lean_file_picker.dart';

然后可以调用pickFile()方法来打开文件选择器。你可以指定允许的文件扩展名或MIME类型:

final file = await pickFile(
  allowedExtensions: ['zip'], // 允许的文件扩展名
  allowedMimeTypes: ['image/jpeg', 'text/*'], // 允许的MIME类型
);
if (file != null) {
  print(file.path); // 打印文件路径
}

处理大文件或虚拟文件系统上的文件

当用户选择了一个大文件或者该文件位于像OneDrive、iCloud这样的虚拟文件系统中时,文件会被复制到临时位置,这个过程可能需要一些时间。为了给用户提供反馈,可以在pickFile()函数调用中添加监听器:

final file = await pickFile(
  listener: (status) {
    if (status == FilePickerStatus.copying) {
      print('Selected file is being copied to a temporary location…');
    } else {
      print('Copy process has completed.');
    }
  },
);

注意,在iOS设备上,由于操作系统会自动处理文件复制并且是在原生文件浏览器UI内完成的,因此上述监听器不会被触发。

示例代码

下面是一个完整的示例demo,展示了如何在一个简单的Flutter应用中使用lean_file_picker插件:

import 'package:flutter/material.dart';
import 'package:lean_file_picker/lean_file_picker.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _copying = false;
  var _lastPick = 'No file picked';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('File Picker Example'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                child: Text('Pick File'),
                onPressed: () async {
                  final file = await pickFile(
                    allowedExtensions: ['zip'],
                    allowedMimeTypes: ['image/jpeg', 'text/*'],
                    listener: (status) =>
                        setState(() => _copying = status == FilePickerStatus.copying),
                  );
                  if (file != null) {
                    final path = file.path;
                    final size = file.lengthSync();
                    file.deleteSync(); // 注意:这里删除了文件,实际使用时请根据需求调整
                    setState(() => _lastPick = 'Picked file $path\nwith a size of $size bytes');
                  } else {
                    setState(() => _lastPick = 'Picker canceled');
                  }
                },
              ),
              if (_copying)
                Padding(
                  padding: const EdgeInsets.all(10),
                  child: Text(
                    "Copying data to temporary file",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
                  ),
                ),
              if (!_copying)
                Padding(
                  padding: const EdgeInsets.all(10),
                  child: Text(
                    _lastPick,
                    textAlign: TextAlign.center,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

此代码创建了一个带有按钮的应用程序界面,点击按钮后将打开文件选择器,用户可以选择一个文件。一旦选择了文件,就会显示所选文件的信息(如路径和大小)。如果正在复制文件,则会显示一条消息告知用户当前正在进行的操作。


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

1 回复

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


当然,以下是如何在Flutter项目中使用lean_file_picker插件的一个详细代码示例。lean_file_picker是一个用于文件选择的Flutter插件,支持从设备存储中选择文件(如图片、文档等)。

步骤 1: 添加依赖

首先,你需要在pubspec.yaml文件中添加lean_file_picker的依赖:

dependencies:
  flutter:
    sdk: flutter
  lean_file_picker: ^latest_version  # 替换为最新版本号

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

步骤 2: 导入插件

在你的Flutter项目的Dart文件中(如main.dart),导入lean_file_picker

import 'package:lean_file_picker/lean_file_picker.dart';
import 'package:flutter/material.dart';

步骤 3: 使用文件选择器

下面是一个完整的示例,展示如何在Flutter应用中使用lean_file_picker来选择文件,并显示所选文件的路径。

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

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

class FilePickerScreen extends StatefulWidget {
  @override
  _FilePickerScreenState createState() => _FilePickerScreenState();
}

class _FilePickerScreenState extends State<FilePickerScreen> {
  String? filePath;

  void _pickFile() async {
    try {
      FilePickerResult? result = await LeanFilePicker.pickFile(
        fileType: FileType.all,  // 可以选择 FileType.all, FileType.image, FileType.video, FileType.audio, FileType.document
        allowMultiple: false,  // 是否允许多选
      );

      if (result != null && result.files.isNotEmpty) {
        setState(() {
          filePath = result.files.first.path;
        });
      }
    } catch (e) {
      print("Error picking file: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('File Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick File'),
            ),
            SizedBox(height: 20),
            if (filePath != null)
              Text(
                'Selected File Path: $filePath',
                style: TextStyle(fontSize: 18),
              )
            else
              Text(
                'No file selected',
                style: TextStyle(fontSize: 18, color: Colors.grey),
              ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖导入:在pubspec.yaml中添加lean_file_picker依赖,并运行flutter pub get
  2. 导入插件:在需要使用文件选择功能的Dart文件中导入lean_file_picker
  3. 使用文件选择器
    • 创建一个按钮,点击时调用_pickFile方法。
    • _pickFile方法使用LeanFilePicker.pickFile来启动文件选择对话框。
    • 如果用户选择了文件,更新状态并显示文件路径。

注意事项

  • 确保你已经在Android和iOS项目中配置了必要的权限,以便访问设备存储。
  • 在实际项目中,根据需求处理文件路径,如上传文件到服务器或进行其他处理。

希望这个示例能帮助你顺利地在Flutter项目中使用lean_file_picker插件。

回到顶部