Flutter网页文件选择插件flutter_web_file_selector的使用

插件简介

flutter_web_file_selector 是一个Flutter包，旨在让用户在Web平台上选择文件。它特别设计用于解决iOS/iPadOS浏览器上文件选择弹出菜单位置不合理的问题。如果你遇到并被这个问题困扰，可以使用这个包来解决。虽然此包可以在所有Web平台上使用，但建议对于非iOS Web平台使用其他更受欢迎且经过验证的包如 file_picker 和 file_selector 。我将 flutter_web_file_selector 视为一种临时解决方案，直到这些流行包解决了上述问题。

功能特性

你可能遇到过iOS/iPadOS浏览器上的文件选择弹出菜单定位不准确的情况。使用此包后，弹出菜单将会正确地显示在你点击的位置旁边。

使用方法

要使用此包，请将 flutter_web_file_selector 添加为 pubspec.yaml文件中的依赖项。

示例代码

下面是一个完整的示例demo，展示了如何在项目中使用 flutter_web_file_selector 包。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_web_file_selector/flutter_web_file_selector.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _disabled = false;

  Future<void> _processFiles(List<XFile> files) async {
    for (final XFile file in files) {
      debugPrint('File: ${file.name} (MIME type: ${file.mimeType})');

      // You can get bytes from the file with these methods:
      // final Uint8List bytes = await file.readAsBytes();
      // final Stream<Uint8List> stream = file.openRead();
      // ...
    }
  }

  Future<void> _selectFiles() {
    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Not using flutter_web_file_selector'),
          content: const Text(
            'You can use other packages like file_selector or file_picker',
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Close'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // To use the flutter_web_file_selector package on all web browsers, you can just use kIsWeb.
    const bool useWebFileSelector = kIsWeb;
    // To use the package only for web browsers running on iOS/iPadOS, you can use WebFileSelector.isIOSWeb instead.
    // final useWebFileSelector = WebFileSelector.isIOSWeb;

    // The "accept" argument in WebFileSelector accepts the same value as the accept attribute in <input type="file">.
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
    const String acceptedFileTypes = '.pdf, .png, .jpg, .jpeg, .tif, .tiff';

    // The "multiple" aregument controls whether to let users select multiple files or not.
    const bool multipleFiles = true;

    // onPress event handler for buttons
    void Function()? onPressed;
    if (!_disabled) {
      onPressed = () {
        if (!useWebFileSelector) {
          // Not using the WebFileSelector.
          // Use other packages like file_selector or file_picker.
          _selectFiles();
        }
      };
    }

    // onData event handler for WebFileSelector widget
    void Function(List<XFile> files)? onData;
    if (!_disabled) {
      onData = (files) => _processFiles(files);
    }

    // Create a "Select Files" button
    Widget selectFilesButton = ElevatedButton(
      onPressed: onPressed,
      child: const Text('Select Files'),
    );

    if (useWebFileSelector) {
      // Wrap the "Select Files" button with WebFileSelector widget
      selectFilesButton = WebFileSelector(
        onData: onData,
        accept: acceptedFileTypes,
        multiple: multipleFiles,
        child: selectFilesButton,
      );
    }

    // Create a floating action button
    Widget? floatingActionButton;
    if (!_disabled) {
      floatingActionButton = FloatingActionButton(
        onPressed: onPressed,
        tooltip: 'Select Files',
        child: const Icon(Icons.add),
      );

      if (useWebFileSelector) {
        // Wrap the floating action button with WebFileSelector widget
        floatingActionButton = WebFileSelector(
          onData: onData,
          accept: acceptedFileTypes,
          multiple: multipleFiles,
          child: floatingActionButton,
        );
      }
    }

    // Create a "Enable/Disable Buttons" button
    final toggleButton = ElevatedButton(
      onPressed: () => setState(() {
        // Toggle the Enable/Disable button
        _disabled = !_disabled;
      }),
      child: Text(_disabled ? 'Enable Buttons' : 'Disable Buttons'),
    );

    // Put them together
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_web_file_selector Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Press one of the buttons to select files'),
            const SizedBox(height: 10),
            selectFilesButton, // "Select Files" button
            const SizedBox(height: 20),
            toggleButton, // "Enable/Disable Buttons" button
          ],
        ),
      ),
      floatingActionButton: floatingActionButton, // Floating action button
    );
  }
}

该示例演示了如何根据是否是iOS Web环境来决定是否使用 flutter_web_file_selector 包，并且展示了如何处理文件选择后的数据。你可以根据自己的需求调整 acceptedFileTypes 和 multipleFiles 参数以适应不同的文件选择需求。