Flutter相机与图片选择器插件gallery_camera_image_picker_view的使用

Flutter相机与图片选择器插件gallery_camera_image_picker_view的使用

Pub Dev GitHub Issues License

一个完整的组件，可以轻松从设备中选择多张图片并在UI中显示。选择的图片可以轻松重新排序和删除。

🚀 直观演示示例项目： https://shubham-gupta-16.github.io/gallery_camera_image_picker_view/

特性

  • 支持选择多张图片
  • 图片以GridView形式展示
  • 可通过拖动重新排列图片
  • 可删除已选图片
  • 可限制最大图片数量
  • 可限制图片类型
  • 完全自定义UI

开始使用

flutter pub add gallery_camera_image_picker_view

使用方法

定义控制器
final controller = GalleryCameraImagePickerController();

或者

final controller = GalleryCameraImagePickerController(
  maxImages: 15,
  allowedImageTypes: ['png', 'jpg', 'jpeg'],
  withData: true,
  withReadStream: true,
  images: [] // 预选或默认选择的图片数组
);

注意： 设置 withData 为 true 后，ImageFile 将包含 bytes。在Web平台上始终为 true。但是，在启用此功能时要小心，因为这可能导致内存问题。建议使用 withReadStream。

注意： 设置 withReadStream 为 true 后，ImageFile 将包含 readStream 类型的 Stream<List<int>>。在Web平台上始终为 false。

UI实现
GallaryCameraImagePickerView(
  controller: controller,
  padding: const EdgeInsets.all(10),
);

或者

GallaryCameraImagePickerView(
  controller: controller,
  draggable: /* 是否允许用户通过拖动重新排列图片，默认为true */,
  showAddMoreButton: /* 是否显示添加更多按钮，默认为true */,
  showInitialContainer: /* 是否显示初始容器，默认为true */,
  initialContainerBuilder: (context, pickerCallback) {
    // 返回自定义的初始控件，并在用户点击时调用 pickerCallback
  },
  itemBuilder: (context, image, removeCallback) {
    // 返回自定义卡片用于显示图片和移除按钮，并在点击时调用 removeCallback
  },
  addMoreBuilder: (context, pickerCallback) {
    // 返回自定义卡片或项控件，并在用户点击时调用 pickerCallback
  },
  addButtonTitle: /* 添加按钮的默认标题 */,
  addMoreButtonTitle: /* 添加更多按钮的默认标题 */,
  gridDelegate: /* 自定义的 SliverGridDelegate */,
  onDragBoxDecoration: /* 拖拽时的 BoxDecoration */,
  onChange: (images) {
    // 回调更新图片
  },
);
获取选择的图片

选择的图片可以从控制器中获取。

final images = controller.images; // 返回 Iterable<ImageFile>
for (final image in images) {
  if (image.hasPath)
    request.addFile(File(image.path!));
  else 
    request.addFile(File.fromRawPath(image.bytes!));
}
request.send();

控制器还可以执行其他操作。

controller.pickImages()
controller.hasNoImages // 返回是否没有任何图片
controller.maxImages // 返回最大图片数
controller.allowedImageTypes // 返回允许的图片类型
controller.addImage(imageFile) // 添加 ImageFile 到图片列表
controller.removeImage(imageFile) // 从图片列表中移除 ImageFile
controller.clearImages() // 清空所有图片（清除选择）
controller.reOrderImage(oldIndex, newIndex) // 重新排列图片
ImageFile类

ImageFile 类保存所选图片。它包含 name、extension、bytes?、readStream? 和 path?。 在Web平台上，path 始终为null。默认情况下，bytes 在IO（Android和iOS）上为null。要在IO设备上获取 bytes，请在 GalleryCameraImagePickerController 中设置 withData 为 true。 但是，在启用此功能时要小心，因为这可能导致内存问题。建议使用 withReadStream。

readStream 在Web平台上始终为null。默认情况下，readStream 在IO（Android和iOS）上为null。要在IO设备上获取 readStream，请在 GalleryCameraImagePickerController 中设置 withReadStream 为 true。

注意： 对于Web平台，ImageFile 包含 bytes 并且不能为null。

ImageFileView小部件

该小部件帮助显示存储在 ImageFile 中的图片。这是 Image.network 或 Image.memory 小部件的替代品。通过传递 ImageFile 对象，可以轻松显示图片。

ImageFileView(
  file: imageFileObject,
  fit: BoxFit.cover
)

更多关于Flutter相机与图片选择器插件gallery_camera_image_picker_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相机与图片选择器插件gallery_camera_image_picker_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 gallery_camera_image_picker_view 插件的 Flutter 代码示例。这个插件允许用户在相机和图片库之间切换来选择图片。

首先，确保你在 pubspec.yaml 文件中添加了 gallery_camera_image_picker_view 依赖：

dependencies:
  flutter:
    sdk: flutter
  gallery_camera_image_picker_view: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

接下来是完整的 Flutter 应用代码示例，它展示了如何使用 gallery_camera_image_picker_view 插件：

import 'package:flutter/material.dart';
import 'package:gallery_camera_image_picker_view/gallery_camera_image_picker_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Camera & Gallery Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late File? _imageFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera & Gallery Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile == null
                ? Text('No image selected.')
                : Image.file(_imageFile!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _pickImage() async {
    final result = await GalleryCameraImagePickerView.pickImage(
      context: context,
      options: GalleryCameraImagePickerOptions(
        title: 'Select Image',
        cameraAspectRatio: CameraAspectRatio.ratio16x9,
        isCameraEnabled: true,
        isGalleryEnabled: true,
        maxDuration: Duration(seconds: 10),
        // 其他选项可以根据需要配置
      ),
    );

    if (result != null && result.isSuccess) {
      setState(() {
        _imageFile = File(result.path);
      });
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to pick image')),
      );
    }
  }
}

代码解释

  1. 依赖项：在 pubspec.yaml 文件中添加 gallery_camera_image_picker_view 依赖项。

  2. 主应用：创建一个简单的 Flutter 应用，其中包含一个按钮和一个显示所选图像的 Image 组件。

  3. 选择图像：

    • 使用 GalleryCameraImagePickerView.pickImage 方法来选择图像。
    • GalleryCameraImagePickerOptions 类允许你配置选择器的一些选项，例如是否启用相机和图片库，相机宽高比等。
    • 如果选择成功，将所选图像的路径存储在 _imageFile 状态变量中，并更新界面以显示图像。

  4. 显示图像：使用 Image.file 方法来显示所选的图像文件。

请确保在实际项目中处理图像文件的潜在内存泄漏和权限请求等问题。对于 Android，你需要在 AndroidManifest.xml 中请求相机和存储权限。对于 iOS，你需要在 Info.plist 中添加相关权限描述。

回到顶部