form_builder_file_picker 2.3.0 copy "form_builder_file_picker: ^2.3.0" to clipboard
form_builder_file_picker: ^2.3.0 copied to clipboard

FilePicker Field for flutter_form_builder package. Used to select files as part of form input.

Form Builder File Picker #

File Picker Field for flutter_form_builder package

Pub Version GitHub Workflow Status CodeFactor Grade Codecov Discord


Features #

  • Automatic handle permissions
  • Show images preview

Use #

Setup #

Since this package makes use of file_picker package, for platform specific setup follow this instructions

Basic use #

 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);
    },
  ),

Especific uses #

On mobile platforms the file picker will open a default document picker if used with FileType.any. If you want to be able to pick documents and images in the same form field, you will need to define different file types and thus different selectors. To achieve this use the typeSelectors parameter. This way the user will see two buttons to open a file picker for documents and a file picker for the photos gallery.

For example:

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"),
            ),
          ],
        ),
      ),
    ],
  )

Support #

Contribute #

You have some ways to contribute to this packages

  • Beginner: Reporting bugs or request new features
  • Intermediate: Implement new features (from issues or not) and created pull requests
  • Advanced: Join to organization like a member and help coding, manage issues, dicuss new features and other things

See contribution file for more details

Questions and answers #

You can join to our Discord server or search answers in StackOverflow

Donations #

Buy a coffe to Danvick Miller, creator of this awesome package

Buy me a coffee

Roadmap #

Ecosystem #

Take a look to our awesome ecosystem and all packages in there

Thanks to #

Contributors #

Made with contrib.rocks.