Flutter图片输入字段插件 image_field 的使用

image_field 是一个 Flutter 插件，允许用户在表单中上传和管理图片。它不仅支持强大的图片适应功能，还提供了在上传到服务器之前对小部件进行修改的功能，以及其他许多特性。

截图

特性

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

使用方法

1. 安装插件

使用 Dart：

$ dart pub add image_field

使用 Flutter：

$ flutter pub add image_field

2. 安装依赖

请阅读 Image Picker 的安装说明，并不要忘记在 iOS 的 Info.plist 和 Android 的 AndroidManifest.xml 中添加必要的键，以防止应用在尝试上传或拍照时崩溃。

3. 实现示例

远程图片上传

以下是一个将图片上传到服务器的示例：

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_if.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> {
  final _formKey = GlobalKey<FormState>();

  dynamic remoteFiles;

  Future<dynamic> uploadToServer(XFile? file, {Progress? uploadProgress}) async {
    // 实现你的代码，使用 REST API 或其他技术
  }

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

本地图片上传

以下是一个将图片本地保存的示例：

import 'package:flutter/material.dart';
import 'package:image_field/image_field.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: [
            // 其他表单字段
            // ...

            // 本地图片上传
            ImageField(
              onSave: (List<ImageAndCaptionModel>? imageAndCaptionList) {
                // 你可以将 imageAndCaptionList 保存到本地存储或简单变量中
              },
            ),
          ],
        ),
      ),
    );
  }
}

主要参数

主要函数

许可证

此包遵循 MIT License。

希望这些信息对你有帮助！如果有任何问题或需要进一步的帮助，请随时提问。