Flutter图片管理插件fk_photos的使用

Flutter图片管理插件fk_photos的使用

安装

pubspec.yaml 文件中添加依赖:

dependencies:
  fk_photos: <last_version>

使用

1. cameraPicker 拍照/拍摄视频 <- Future

参数说明

参数 描述 类型 默认值
isAllowRecording 是否允许录像 bool false
enableAudio 录像时是否需要录制声音 bool false
maximumRecordingDuration 录制视频最长时长 Duration 15s
resolutionPreset 相机的分辨率预设 ResolutionPreset high

2. albumPicker 资源选择器(图片/视频) <- Future<List>

参数说明

参数 描述 类型 默认值
selectedAssets 默认选中的资源 List null
requestType 选择器选择资源的类型 RequestType image
maxAssets 最多选择的图片数量 int 1

3. deleteAsset 删除资源文件 <- Future

参数说明

参数 描述 类型 默认值
id 资源id String null

4. saveToAlbum 保存图片到相册 <- Future

参数说明

参数 描述 类型 默认值
url 网络图片 String null
asset 资源文件 AssetEntity null
base64Img Base64 图片 String null
uint8list Uint8List Uint8List null
path 本地文件路径 String null

5. 压缩图片

5.1 compressFile 压缩图片 <- Future

参数说明

参数 描述 类型 默认值
file 图片文件 File null
minWidth 最小宽度 int 1920
minHeight 最小高度 int 1080
quality 质量 int 85

5.2 compressAndGetFile 压缩图片 <- Future

参数说明

参数 描述 类型 默认值
file 图片文件 File null
targetPath 保存路径 String null
minWidth 最小宽度 int 1920
minHeight 最小高度 int 1080
quality 质量 int 85

5.3 compressAsset 压缩图片 <- Future

参数说明

参数 描述 类型 默认值
assetName 资源文件名称 String null
minWidth 最小宽度 int 1920
minHeight 最小高度 int 1080
quality 质量 int 85

5.4 compressList 压缩图片 <- Future

参数说明

参数 描述 类型 默认值
list Uint8List Uint8List null
minWidth 最小宽度 int 1920
minHeight 最小高度 int 1080
quality 质量 int 85

6. 扩展功能

6.1 AssetEntityExtension on AssetEntity

  • saveToAlbum: 保存到相册
  • toBase64: 转为base64
  • compress: 压缩文件, 压缩参数请参考 FKPhotos.compressAndGetFile

6.2 Uint8ListExtension on Uint8List

  • toBase64: 转为base64

6.3 FileExtension on File

  • toBase64: 转为base64

7. 快捷方法

7.1 showPhotoViewerDialog 显示图片弹窗

showPhotoViewerDialog();

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

1 回复

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


当然,以下是如何在Flutter项目中使用fk_photos插件来管理图片的示例代码。fk_photos插件通常用于图片的选择、预览和管理等功能。请注意,实际使用时你需要确保在pubspec.yaml文件中添加该插件的依赖,并且已经正确配置了你的Flutter开发环境。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  fk_photos: ^最新版本号  # 替换为实际的最新版本号

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

2. 导入插件

在你的Dart文件中导入fk_photos插件:

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

3. 使用FKPhotos插件

下面是一个简单的示例,展示了如何使用fk_photos插件来选择和预览图片:

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> selectedImages = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('fk_photos Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () async {
              // 打开图片选择器
              List<String> result = await FKPhotos.pickImages(
                maxCount: 10, // 最大选择图片数量
                selectType: SelectType.album, // 选择类型:相册或相机
              );
              
              // 更新选择的图片列表
              setState(() {
                selectedImages = result;
              });
            },
            child: Text('选择图片'),
          ),
          SizedBox(height: 20),
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 4,
                mainAxisSpacing: 4,
              ),
              itemCount: selectedImages.length,
              itemBuilder: (context, index) {
                return Image.file(
                  File(selectedImages[index]),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

4. 注意事项

  • 在实际使用中,你可能需要处理更多的错误和边缘情况,例如权限请求(读取存储权限)。
  • FKPhotos.pickImages方法返回的是图片的路径列表,你需要使用File类来加载这些图片。
  • 插件的API可能会随着版本更新而变化,请参考最新的官方文档来获取最新的使用方法和API。

这个示例展示了如何使用fk_photos插件来选择图片并在界面上显示它们。你可以根据需要进一步扩展这个示例,例如添加图片预览、删除等功能。

回到顶部