Flutter图片选择插件hexa_image_picker的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter 图片选择插件 hexa_image_picker 的使用

在使用标准 Flutter 图片选择器从相册中选择图片时,我发现无法访问 GPS 位置元数据。因此,我制作了这个插件作为特定用例的解决方案,通过避免 Android 图片选择器来保留位置元数据。

使用方法

以下是如何使用 hexa_image_picker 插件的示例代码:

import 'dart:io';
import 'package:device_info_plus/device_info_plus.dart';
import 'package:hexa_image_picker/hexa_image_picker.dart';
import 'package:image_picker/image_picker.dart';

Future<XFile?> _pickImage(ImageSource imageSource) async {
  bool useStandardImagePicker = true;

  // 如果是 Android 并且选择了相册来源
  if (Platform.isAndroid && imageSource == ImageSource.gallery) {
    DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
    AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;

    // 如果 Android 版本大于等于 33,则使用 hexa_image_picker
    if (androidInfo.version.sdkInt >= 33) {
      useStandardImagePicker = false;
    }
  }

  // 根据条件选择不同的图片选择器
  if (useStandardImagePicker) {
    ImagePicker _imagePicker = new ImagePicker();
    return await _imagePicker.pickImage(
        source: imageSource, imageQuality: 50, preferredCameraDevice: CameraDevice.rear);
  } else {
    HexaImagePicker _hexaImagePicker = new HexaImagePicker();
    return await _hexaImagePicker.pickImage();
  }
}

完整示例 Demo

以下是一个完整的示例,展示了如何在 Flutter 应用中使用 hexa_image_picker 插件:

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:device_info_plus/device_info_plus.dart';
import 'package:hexa_image_picker/hexa_image_picker.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('hexa_image_picker 示例')),
        body: Center(
          child: MyImagePicker(),
        ),
      ),
    );
  }
}

class MyImagePicker extends StatefulWidget {
  [@override](/user/override)
  _MyImagePickerState createState() => _MyImagePickerState();
}

class _MyImagePickerState extends State<MyImagePicker> {
  XFile? _pickedImage;

  Future<void> _pickFromGallery() async {
    XFile? pickedImage = await _pickImage(ImageSource.gallery);
    setState(() {
      _pickedImage = pickedImage;
    });
  }

  Future<XFile?> _pickImage(ImageSource imageSource) async {
    bool useStandardImagePicker = true;

    // 如果是 Android 并且选择了相册来源
    if (Platform.isAndroid && imageSource == ImageSource.gallery) {
      DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
      AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;

      // 如果 Android 版本大于等于 33,则使用 hexa_image_picker
      if (androidInfo.version.sdkInt >= 33) {
        useStandardImagePicker = false;
      }
    }

    // 根据条件选择不同的图片选择器
    if (useStandardImagePicker) {
      ImagePicker _imagePicker = new ImagePicker();
      return await _imagePicker.pickImage(
          source: imageSource, imageQuality: 50, preferredCameraDevice: CameraDevice.rear);
    } else {
      HexaImagePicker _hexaImagePicker = new HexaImagePicker();
      return await _hexaImagePicker.pickImage();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: _pickFromGallery,
          child: Text('从相册选择图片'),
        ),
        SizedBox(height: 20),
        if (_pickedImage != null)
          Image.file(
            File(_pickedImage!.path),
            height: 200,
          ),
      ],
    );
  }
}

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

1 回复

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


hexa_image_picker 是一个 Flutter 插件,用于从设备的图库或相机中选择图片。虽然 hexa_image_picker 并不是 Flutter 官方推荐的图片选择插件(官方推荐的是 image_picker),但它仍然是一个可用的选项。以下是使用 hexa_image_picker 的基本步骤。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 hexa_image_picker 的依赖:

dependencies:
  flutter:
    sdk: flutter
  hexa_image_picker: ^0.0.3  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 hexa_image_picker

import 'package:hexa_image_picker/hexa_image_picker.dart';

3. 使用 hexa_image_picker 选择图片

你可以使用 HexaImagePicker.pickImage 方法来从图库或相机中选择图片。以下是一个简单的示例:

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

class ImagePickerExample extends StatefulWidget {
  @override
  _ImagePickerExampleState createState() => _ImagePickerExampleState();
}

class _ImagePickerExampleState extends State<ImagePickerExample> {
  String? _imagePath;

  Future<void> _pickImage() async {
    try {
      final pickedFile = await HexaImagePicker.pickImage(
        source: ImageSource.gallery, // 或者 ImageSource.camera
      );

      if (pickedFile != null) {
        setState(() {
          _imagePath = pickedFile.path;
        });
      }
    } catch (e) {
      print("Error picking image: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hexa Image Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imagePath != null
                ? Image.file(
                    File(_imagePath!),
                    width: 200,
                    height: 200,
                    fit: BoxFit.cover,
                  )
                : Text('No image selected.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image from Gallery'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ImagePickerExample(),
));

4. 运行应用

现在你可以运行应用,点击按钮从图库中选择图片,并在应用中显示选中的图片。

5. 处理权限

在使用 hexa_image_picker 时,确保你已经在 AndroidManifest.xmlInfo.plist 中添加了必要的权限。

Android (AndroidManifest.xml):

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>

iOS (Info.plist):

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to take photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to select photos.</string>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!