Flutter图片字段

Flutter软件包允许用户通过在表单中添加图片字段来上传和管理图片，此外，它还提供了强大的功能，可以在上传到服务器之前适配图片，并在渲染之前修改小部件以及许多其他功能。

截图

wait a moment

特点

  • 最佳结构支持上传到服务器
  • 本地化，覆盖所有文本
  • 支持多文件上传
  • 您可以指定图片上传的数量限制
  • 上传进度

用法

1.使用Dart安装软件包

$ dart pub add image_field

使用 Flutter

$ flutter pub add image_field

这将向您的软件包的pubspec.yaml添加类似这样的行（并隐式运行dart pub get）

dependencies:
  image_field: ^0.0.2

2.实现您可以按照以下示例使用ImageField()上传到服务器


import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_field/image_field.dart';
import 'package:image_field/linear_progress_Indicator.dart';
import 'package:image_picker/image_picker.dart';

typedef Progress = Function(double percent);

class UploadRemoteImageForm extends StatefulWidget {
  const UploadRemoteImageForm({super.key, required this.title});
  final String title;
  @override
  State<UploadRemoteImageForm> createState() => _UploadRemoteImageFormState();
}

class _UploadRemoteImageFormState extends State<UploadRemoteImageForm> {
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  dynamic remoteFiles;

 
  Future<dynamic> uploadToServer(XFile? file,
      {Progress? uploadProgress}) async {
    //implement your code using Rest API or other technology
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Form(
          key: _formKey,
          child:  Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
        
                //Remote Image upload
                ImageField(
                    texts: const {
                      'fieldFormText': 'Upload to server',
                      'titleText': 'Upload to server'
                    },
                    defaultFiles: remoteFiles != null
                        ? remoteFiles!.map((image) {
                            return ImageAndCaptionModel(
                                file: image, caption: image.alt.toString());
                          }).toList()
                        : [],
                    remoteImage: true,
                    onUpload: (dynamic pickedFile,
                        ControllerLinearProgressIndicator?
                            controllerLinearProgressIndicator) async {
                      dynamic fileUploaded = await uploadToServer(
                        pickedFile,
                        uploadProgress: (percent) {
                          var uploadProgressPercentage = percent / 100;
                          controllerLinearProgressIndicator!
                              .updateProgress(uploadProgressPercentage);
                        },
                      );
                      return fileUploaded;
                    },
                    onSave: (List<ImageAndCaptionModel>? imageAndCaptionList) {
                      remoteFiles = imageAndCaptionList;
                    }),
      
              ],
            ),
     
        ));
  }
}

简单本地上传，通过将ImageField()添加到表单中，如下例所示

import 'package:flutter/material.dart';
import 'package:image_field/image_field.dart';
import 'package:image_field/linear_progress_Indicator.dart';


class UploadLocalImageForm extends StatefulWidget {
  const UploadLocalImageForm({super.key, required this.title});

  final String title;

  @override
  State<UploadLocalImageForm> createState() => _UploadLocalImageFormState();
}

class _UploadLocalImageFormState extends State<UploadLocalImageForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Form(
          key: _formKey,
          child:  Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                
                //...
                // textfield
                // checkbox
                // datefield
                // ....

              //Local image upload
                ImageField(onSave:(List<ImageAndCaptionModel>? imageAndCaptionList) {
                    //you can save imageAndCaptionList using local storage
                    //or in a simple variable
                },),
 
                 //....
                 //Submit button
                 //....
              ],
            ),
          ),
        );
  }
}

主要参数

参数 类型 描述
defaultFiles 列表 用于在加载时添加默认图片
remoteImage Widget 用于远程上传图片，如果为True，则应实现onUpload()函数
texts Map<String, String> 用于本地化或覆盖Imagefield使用的默认文本的键/值变量。
multipleUpload 布尔值 允许用户选择多个文件。
cardinality 整数 可以上传的最大文件数。

主要功能

功能 参数 描述
onUpload dynamic Function(dynamic, ControllerLinearProgressIndicator?)? 此函数包含用户上传的[dataSource]图片，用于将其发送到服务器，[controllerLinearProgressIndicator]用作参考变量，用于指示上传到服务器的进度，并将结果返回到[fileList]（在字段中使用）。
onSave void Function(List?)? 用于使用上传的文件更新表单，当从列表视图返回时调用
alterFieldForm Widget Function(List?, Widget)? 这是一个钩子函数，用于在渲染之前修改表单中的小部件（缩略图列表）

许可证

此软件包根据MIT许可证授权

GitHub

查看 Github