Flutter表单构建文件选择插件form_builder_file_picker的使用

form_builder_file_picker是Flutter中用于创建表单时，提供文件选择功能的一个插件。它与flutter_form_builder包配合使用，可以方便地在表单中添加文件选择字段。以下是关于如何使用这个插件的详细介绍。

特性

• 自动处理权限：无需手动请求权限，插件会自动处理。
• 显示图片预览：对于图片类型的文件，可以直接在界面上进行预览。

使用方法

设置

由于此插件依赖于file_picker包，因此需要根据不同的平台（如Android、iOS等）进行特定的设置，请参考file_picker的设置指南。

基本用法

import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_file_picker/form_builder_file_picker.dart';

FormBuilderFilePicker(
  name: "images",
  decoration: InputDecoration(labelText: "Attachments"),
  maxFiles: null,
  previewImages: true,
  onChanged: (val) => print(val),
  typeSelectors: [
    TypeSelector(
      type: FileType.any,
      selector: Row(
        children: <Widget>[
          Icon(Icons.add_circle),
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Add documents"),
          ),
        ],
      ),
    ),
  ],
  onFileLoading: (val) {
    print(val);
  },
)

特定用途

如果你想在同一表单字段中同时支持文档和图片的选择，可以通过配置typeSelectors参数来实现。例如：

FormBuilderFilePicker(
  name: "attachments",
  previewImages: false,
  allowMultiple: true,
  withData: true,
  typeSelectors: [
    TypeSelector(
      type: FileType.any,
      selector: Row(
        children: <Widget>[
          Icon(Icons.add_circle),
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Add documents"),
          ),
        ],
      ),
    ),
    if (!kIsWeb)
      TypeSelector(
        type: FileType.image,
        selector: Row(
          children: <Widget>[
            Icon(Icons.add_photo_alternate),
            Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: Text("Add images"),
            ),
          ],
        ),
      ),
  ]
)

示例代码

下面是一个完整的示例代码，展示了如何将form_builder_file_picker集成到一个简单的Flutter应用中，并实现了基本的功能：

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_file_picker/form_builder_file_picker.dart';

void main() => runApp(const MyApp());

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

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

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

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormBuilderState>();
  bool _useCustomFileViewer = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FormBuilder FilePicker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: <Widget>[
              FormBuilderFilePicker(
                name: 'images',
                decoration: const InputDecoration(labelText: 'Attachments'),
                maxFiles: null,
                allowMultiple: true,
                previewImages: true,
                onChanged: (val) => debugPrint(val.toString()),
                typeSelectors: const [
                  TypeSelector(
                    type: FileType.any,
                    selector: Row(
                      children: <Widget>[
                        Icon(Icons.file_upload),
                        Text('Upload'),
                      ],
                    ),
                  )
                ],
                customTypeViewerBuilder: (children) => Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: children,
                ),
                onFileLoading: (val) {
                  debugPrint(val.toString());
                },
                customFileViewerBuilder: _useCustomFileViewer
                    ? (files, filesSetter) =>
                        customFileViewerBuilder(files ?? [], (newValue) {})
                    : null,
              ),
              const SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    child: const Text('Submit'),
                    onPressed: () {
                      _formKey.currentState!.save();
                      debugPrint(_formKey.currentState!.value.toString());
                    },
                  ),
                  const Spacer(),
                  ElevatedButton(
                    child: Text(_useCustomFileViewer
                        ? 'Use Default File Viewer'
                        : 'Use Custom File Viewer'),
                    onPressed: () {
                      setState(() => _useCustomFileViewer = !_useCustomFileViewer);
                    },
                  ),
                  const Spacer(),
                  ElevatedButton(
                    child: const Text('Reset'),
                    onPressed: () {
                      setState(
                        () => _formKey.currentState!.reset(),
                      );
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget customFileViewerBuilder(
    List<PlatformFile> files,
    FormFieldSetter<List<PlatformFile>> setter,
  ) {
    return files.isEmpty
        ? const Center(child: Text('No files'))
        : ListView.separated(
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(files[index].name),
                trailing: IconButton(
                  icon: const Icon(Icons.delete),
                  onPressed: () {
                    files.removeAt(index);
                    setter.call([...files]);
                  },
                ),
              );
            },
            separatorBuilder: (context, index) =>
                const Divider(color: Colors.blueAccent),
            itemCount: files.length,
          );
  }
}

这段代码展示了一个包含文件选择器的简单页面，用户可以选择多个文件并提交表单。此外，还提供了切换自定义文件查看器和默认文件查看器的功能，以及重置表单按钮。