Flutter图片选择插件simple_ios_image_picker的使用

Flutter图片选择插件simple_ios_image_picker的使用

简介

simple_ios_image_picker 是一个用于在Flutter应用中选择图片的插件，它修复了一些原生 image_picker 插件中存在的问题。例如，它解决了某些iOS设备上图片选择时出现的问题。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 simple_ios_image_picker 插件来选择并显示图片。该示例包含了一个按钮，点击后可以选择一张图片，并将其显示在界面上。

import 'dart:async';
import 'dart:typed_data';

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个 SimpleIosImagePicker 实例
  final _simpleIosImagePickerPlugin = SimpleIosImagePicker();
  
  // 用于存储选中的图片数据
  List<Uint8List>? pickedFileList;

  // 选择单张图片的方法
  Future<void> pickSingleImage(
    double compressionQuality, // 压缩质量，范围为0-1
    int width, // 图片的最大宽度
    int height, // 图片的最大高度
  ) async {
    // 调用插件的 pickImagesAsByData 方法选择图片
    final fileList = await _simpleIosImagePickerPlugin.pickImagesAsByData(
      compressionQuality: compressionQuality,
      maxWidth: width,
      maxHeight: height,
    );
    
    // 更新状态，将选中的图片数据保存到 pickedFileList 中
    setState(() {
      pickedFileList = fileList;
    });
  }

  // 显示选中的图片
  Widget images() {
    final imageList = pickedFileList;
    
    // 如果没有选中图片，则返回一个空的 SizedBox
    if (imageList == null) return const SizedBox.shrink();

    // 如果有图片，则显示图片
    if (imageList.isNotEmpty) {
      print('imageBytes: ${imageList.first.lengthInBytes}'); // 打印图片的字节大小
      return SingleChildScrollView(
        scrollDirection: Axis.horizontal, // 横向滚动
        child: Row(
          children: imageList
              .map(
                (image) => Image.memory( // 使用 Image.memory 显示图片
                  image,
                  width: 200, // 设置图片宽度
                  height: 200, // 设置图片高度
                ),
              )
              .toList(),
        ),
      );
    } else {
      // 如果没有图片，则显示提示文本
      return const Text('No image picked.');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome'), // 设置应用栏标题
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: [
            Center(child: images()), // 显示选中的图片
            const SizedBox(height: 40), // 添加间距
            ElevatedButton(
              onPressed: () => pickSingleImage(0.1, 100, 200), // 点击按钮选择图片
              child: const Text('pick image'), // 按钮文本
            )
          ],
        ),
      ),
    );
  }
}