Flutter文件选择插件cross_file_picker的使用

Flutter文件选择插件cross_file_picker的使用

简介

cross_file_picker 是一个允许你使用原生文件浏览器选择单个或多个文件的Flutter插件，并支持文件扩展名过滤。该插件集成了 cross_file 包中的 XFile 类，提供了与 file_picker 包类似的接口。

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 cross_file_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  cross_file_picker: ^1.0.0

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

2. 导入包

在 Dart 文件中导入 cross_file_picker 包：

import 'package:cross_file_picker/cross_file_picker.dart';

3. 选择文件

cross_file_picker 提供了以下方法来选择文件：

• pickMultiFile()：选择多个文件。
• pickFile()：选择单个文件。

下面是一个完整的示例代码，展示了如何使用 cross_file_picker 插件来选择文件并显示文件路径。

完整示例Demo

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

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

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

class FilePickerPage extends StatefulWidget {
  [@override](/user/override)
  _FilePickerPageState createState() => _FilePickerPageState();
}

class _FilePickerPageState extends State<FilePickerPage> {
  List<XFile>? _selectedFiles;

  // 选择多个文件
  Future<void> _pickMultipleFiles() async {
    try {
      final result = await FilePicker.platform.pickMultiFile(); // 选择多个文件
      if (result != null && result.isNotEmpty) {
        setState(() {
          _selectedFiles = result;
        });
      } else {
        // 用户取消选择
        print("No files selected");
      }
    } catch (e) {
      print("Error picking files: $e");
    }
  }

  // 选择单个文件
  Future<void> _pickSingleFile() async {
    try {
      final result = await FilePicker.platform.pickFile(); // 选择单个文件
      if (result != null) {
        setState(() {
          _selectedFiles = [result];
        });
      } else {
        // 用户取消选择
        print("No file selected");
      }
    } catch (e) {
      print("Error picking file: $e");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter File Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickSingleFile,
              child: Text('选择单个文件'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickMultipleFiles,
              child: Text('选择多个文件'),
            ),
            SizedBox(height: 20),
            if (_selectedFiles != null && _selectedFiles!.isNotEmpty)
              Expanded(
                child: ListView.builder(
                  itemCount: _selectedFiles!.length,
                  itemBuilder: (context, index) {
                    final file = _selectedFiles![index];
                    return ListTile(
                      title: Text(file.path), // 显示文件路径
                    );
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }
}