Flutter表单构建与资源选择器插件form_builder_asset_picker的使用

Flutter表单构建与资源选择器插件form_builder_asset_picker的使用

form_builder_asset_picker

form_builder_asset_picker 是一个用于 <a href="https://pub.dev/packages/flutter_form_builder">flutter_form_builder</a> 包的资源选择器字段。它用于在表单输入中选择文件。该插件适用于 Web 和移动应用，桌面环境尚未测试。

此插件是 Danvick Miller 开发的 <a href="https://pub.dev/packages/form_builder_file_picker">form_builder_file_picker</a> 的分支版本。

Setup

此包依赖于 <a href="https://pub.dev/packages/file_picker">file_picker package</a> 和 <a href="https://pub.dev/packages/permission_handler">permission_handler package</a>。对于不同平台的具体设置，请参照它们的官方文档进行配置。

Usage

以下是一个完整的示例代码，展示如何使用 FormBuilderAssetPicker 插件来创建一个表单并选择文件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();

  // 允许的文件扩展名
  final List<String>? _allowedExtensions = ['png', 'jpg', 'pdf'];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Form Builder Asset Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: _fbKey,
          child: Column(
            children: [
              // 使用 FormBuilderAssetPicker 创建文件选择器
              FormBuilderAssetPicker(
                name: 'pick-file',
                allowedExtensions: _allowedExtensions, // 允许的文件类型
                allowMultiple: true, // 是否允许多选
                maxFiles: 5, // 最大文件数量
                type: FileType.custom, // 文件类型为自定义
                decoration: const InputDecoration(
                  labelText: '选择文件',
                  border: OutlineInputBorder(),
                ),
                selector: Row(
                  children: const [
                    Icon(Icons.file_upload), // 上传图标
                    SizedBox(width: 8),
                    Text('上传文件'), // 提示文字
                  ],
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_fbKey.currentState!.validate()) {
                    print('表单验证通过');
                  } else {
                    print('表单验证失败');
                  }
                },
                child: const Text('提交表单'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}