Flutter图片选择器插件likk_picker的使用

Flutter图片选择器插件likk_picker的使用

Likk Picker

Platform Pub Package likes Forks

一个克隆自Facebook Messenger相册选择器和相机的Flutter插件。相册视图和相机视图也可以作为单独的Flutter组件使用。底层使用了Photo Manager和Camera。

目录

安装

1. 添加依赖

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

dependencies:
  likk_picker: ^latest_version

2. 安装依赖

你可以通过命令行来安装包：

使用 pub:

$ pub get

使用 Flutter:

$ flutter pub get

3. 导入库

在你的Dart代码中导入：

import 'package:likk_picker/likk_picker.dart';

平台设置

对于更多的细节（如果需要）你可以查看Photo Manager和Camera的readme部分。

Android

在你的android/app/build.gradle文件中将最小Android SDK版本更改为21（或更高）：

minSdkVersion 21

所需权限：INTERNET、READ_EXTERNAL_STORAGE、WRITE_EXTERNAL_STORAGE、ACCESS_MEDIA_LOCATION。如果你不需要ACCESS_MEDIA_LOCATION权限，可以参见禁用ACCESS_MEDIA_LOCATION权限。

glide

Android原生使用glide来创建图像缩略图字节，版本为4.11.0。

如果你的其他Android库也使用了这个库，且版本不同，则需要编辑你的Android项目的build.gradle文件：

rootProject.allprojects {

    subprojects {
        project.configurations.all {
            resolutionStrategy.eachDependency { details ->
                if (details.requested.group == 'com.github.bumptech.glide'
                        && details.requested.name.contains('glide')) {
                    details.useVersion '4.11.0'
                }
            }
        }
    }
}

如果你想要使用ProGuard，可以查看Glide的ProGuard文档。

移除媒体位置权限

Android默认包含ACCESS_MEDIA_LOCATION权限。

这个权限是在Android Q中引入的。如果你的应用不需要这个权限，需要在你的应用的Android清单中添加以下节点：

<uses-permission
  android:name="android.permission.ACCESS_MEDIA_LOCATION"
  tools:node="remove"
/>

如果你发现一些带有Glide的日志警告，则主项目需要实现AppGlideModule。详见生成API。

iOS

在info.plist中添加以下内容：

<key>NSPhotoLibraryUsageDescription</key>
<string>Replace with your permission description..</string>
<key>NSCameraUsageDescription</key>
<string>Replace with your permission description..</string>
<key>NSMicrophoneUsageDescription</key>
<string>Replace with your permission description..</string>

相册

Gallery Gallery Gallery

Gallery Gallery Gallery

  1. 使用GalleryViewWrapper使相册视图可折叠，否则忽略它。
class PickerDemo extends StatelessWidget {
 late final GalleryController controller;

  @override
  Widget build(BuildContext context) {
    return GalleryViewWrapper(
      controller: controller,
      child: Scaffold(
        body: ... // 在这里放置你的其他UI组件
      ),
    );
  }
}
  1. 使用GalleryController进行额外设置和选择媒体。
class PickerDemo extends StatelessWidget {
  late final GalleryController controller;

  @override
  void initState() {
    super.initState();
    controller = GalleryController(
      gallerySetting: const GallerySetting(
        albumSubtitle: 'Collapsable',
        enableCamera: true,
        maximum: 10,
        requestType: RequestType.all,
      ),
      panelSetting: const PanelSetting(topMargin: 24.0),
    );
  }

  ...

  onPressed : () async {
    final entities = await controller.pick();
  }

  ...
}
  1. 使用GalleryViewField类似于Flutter的TextField来选择媒体。
GalleryViewField(
  selectedEntities: [],
  onChanged: (entity, isRemoved) {
     // 处理选中或取消选中媒体
  },
  onSubmitted: (list) {
     // 处理用户完成选择
  }
  child: const Icon(Icons.camera),
),
  1. 你也可以将GalleryView作为一个Widget使用。

相机

Camera Camera Camera

Camera Camera Camera

  1. 使用CameraView的pick()函数来选择媒体。
...
onPressed : () async {
  final entity = await CameraView.pick();
}
...
  1. 使用CameraViewField类似于Flutter的TextField来选择媒体。
GalleryViewField(
  onCapture: (entity) {
     // 处理拍照或录制视频完成
  },
  child: const Icon(Icons.camera),
),

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

1 回复

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


likk_picker 是一个 Flutter 插件，用于从设备的相册或相机中选择图片。它提供了一个简单易用的接口，支持多张图片选择、裁剪、压缩等功能。以下是如何使用 likk_picker 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 likk_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  likk_picker: ^1.0.0  # 请使用最新版本

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

2. 配置权限

为了访问设备的相册和相机，你需要在 AndroidManifest.xml 和 Info.plist 文件中添加相应的权限。

Android 配置

在 android/app/src/main/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 配置

在 ios/Runner/Info.plist 中添加以下权限：

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册以选择图片</string>
<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以拍摄图片</string>
<key>NSMicrophoneUsageDescription</key>
<string>我们需要访问您的麦克风以录制视频</string>

3. 使用 likk_picker

在你的 Dart 文件中导入 likk_picker 并开始使用它。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImagePickerExample(),
    );
  }
}

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

class _ImagePickerExampleState extends State<ImagePickerExample> {
  List<String> _imagePaths = [];

  Future<void> _pickImages() async {
    try {
      List<String>? result = await LikkPicker.pickImages(
        maxImages: 5, // 最多选择5张图片
        enableCamera: true, // 允许拍照
        enableCrop: true, // 允许裁剪
        compressQuality: 80, // 图片压缩质量
      );

      if (result != null) {
        setState(() {
          _imagePaths = result;
        });
      }
    } catch (e) {
      print("Error picking images: $e");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _pickImages,
            child: Text('Pick Images'),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _imagePaths.length,
              itemBuilder: (context, index) {
                return Image.file(
                  File(_imagePaths[index]),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
回到顶部