Flutter图片选择功能插件image_picker_widget的使用

image_picker_widget 是一个用于Flutter项目的插件，它集成了 image_picker 和简单的Flutter小部件，允许你在不影响设计代码开发的情况下编辑图像。以下是关于如何使用此插件的详细指南。

依赖添加

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  # 其他依赖...
  image_picker_widget: '>=2.0.0 <3.0.0'

如果你使用的是预空安全版本，请确保使用版本 1.0.3。

安装配置

iOS

对于iOS平台，在 <project root>/ios/Runner/Info.plist 文件中添加以下键值对以请求必要的权限：

• NSPhotoLibraryUsageDescription：描述应用程序需要照片库访问权限的原因。
• NSCameraUsageDescription：描述应用程序需要相机访问权限的原因。
• NSMicrophoneUsageDescription（如果你打算录制视频）：描述应用程序需要麦克风访问权限的原因。

Android

Image Picker 配置

从v1.2.0开始，你需要将Android项目迁移到v2嵌入式（详情）。对于 image_picker ，无需额外配置，插件应该可以开箱即用。

Image Cropper 配置

在 AndroidManifest.xml 中添加 UCropActivity ：

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

参数说明

必需参数

可选参数

自定义选项

Image Picker Widget

Modal image type picker

你可以通过 imagePickerModal 来创建自定义的模态框：

imagePickerModal: (context, selectCamera, selectGallery) => BottomSheet(
  onClosing: () => print('Nothing'),
  builder: (context) => Padding(
    padding: const EdgeInsets.all(16),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ElevatedButton(onPressed: () => selectCamera(context), child: Text("Camera")),
        SizedBox(height: 20),
        ElevatedButton(onPressed: () => selectGallery(context), child: Text("Gallery")),
      ],
    ),
  ),
),

Image Picker Options

Image Cropping Options

示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 image_picker_widget 插件。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker_widget/image_picker_widget.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ""),
      ),
      body: Center(
        child: ImagePickerWidget(
          diameter: 180,
          initialImage: "https://strattonapps.com/wp-content/uploads/2020/02/flutter-logo-5086DD11C5-seeklogo.com_.png",
          shape: ImagePickerWidgetShape.circle,
          isEditable: true,
          shouldCrop: true,
          imagePickerOptions: ImagePickerOptions(
            imageQuality: 65,
          ),
          onChange: (File file) {
            print("I changed the file to: ${file.path}");
          },
        ),
      ),
    );
  }
}

以上代码展示了如何创建一个带有圆形头像的选择器，并且可以选择从相册或相机获取图片，同时支持图片编辑和裁剪功能。

如果有任何问题或者需要进一步的帮助，请随时查看 GitHub issue 页面。