image_form_field_x 0.0.5 copy "image_form_field_x: ^0.0.5" to clipboard
image_form_field_x: ^0.0.5 copied to clipboard

outdated

Upload images in Flutter forms

ImageFormField #

Handle image uploads in a Flutter Form.

Usage #

In order to fully customize the photo upload field, several callbacks and classes are required. In most cases, you will be mixing photos from a remote source and a local upload. For these, an adapter layer is useful:

class ImageInputAdapter {
  /// Initialize from either a URL or a file, but not both.
  ImageInputAdapter({
    this.file,
    this.url
  }) : assert(file != null || url != null), assert(file != null && url == null), assert(file == null && url != null);

  /// An image file
  final File file;
  /// A direct link to the remote image
  final String url;

  /// Render the image from a file or from a remote source.
  Widget widgetize() {
    if (file != null) {
      return Image.file(file);
    } else {
      return FadeInImage(
        image: NetworkImage(url),
        placeholder: AssetImage("assets/images/placeholder.png"),
        fit: BoxFit.contain,
      );
    }
  }
}

Finally, in a Flutter Form:

import 'package:image_form_field/image_form_field.dart';

ImageFormField<ImageInputAdapter>(
  previewImageBuilder: (_, ImageInputAdapter image) =>
    image.widgetize(),
  buttonBuilder: (_, int count) =>
    Container(
      child: Text(
        count == null || count < 1 ? "Upload Image" : "Upload More"
      )
    )
  initializeFileAsImage: (File file) =>
    ImageInputAdapter(file: file),
  initialValue: existingPhotoUrl == null ? null : (List<ImageInputImageAdapter>()..add(ImageInputImageAdapter(url: existingPhotoUrl))),
  // Even if `shouldAllowMultiple` is true, images will always be a `List` of the declared type (i.e. `ImageInputAdater`).
  onSaved: (images) _images = images,
)

For a full example that includes uploading an image, see example/lib/main.dart.

Parameters #

(T == declared display type, i.e. ImageFormField<T>)

name type required description
previewImageBuilder Widget Function(BuildContext, T) * How the image is rendered below the upload button
buttonBuilder Widget Function(BuildContext, [int]) * The display of the button. Do not use FlatButton; the button is already wrapped in a GestureRecognizer
initializeFileAsImage T Function(File) * Convert an upload to the adapter class
controller ImageFieldController Direct access to the images currently displayed or uploaded
initialValue List Images displayed on initial render; if initialValue is set in initState or by some other non-pass through method, do not render the field until the value is set.
onSaved VoidCallback Function(List Handle the uploaded/remote images when the form is saved
validator VoidCallback Function(List Handle the uploaded/remote images when the form is validated
errorTextStyle TextStyle Control how text display when field is invalid; often it's best to use Theme.of(context).inputDecorationTheme.errorStyle
autoValidate bool If field should autovalidate (defaults to false)
shouldAllowMultiple bool If field permits more than one image upload (defaults to true)

Thanks #

Props to AllGo for providing the initial support for this project.

0
likes
0
pub points
1%
popularity

Publisher

unverified uploader

Upload images in Flutter forms

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, image_picker

More

Packages that depend on image_form_field_x