Flutter图片选择插件insta_assets_picker

Flutter图片选择插件insta_assets_picker_new的使用

insta_assets_picker_new 是一个基于 Instagram 图片选择界面的图片选择器。它使用了强大的 flutter_wechat_assets_picker 包来处理图片选择，并使用自定义版本的 image_crop 进行裁剪。

🚀 功能

✅ Instagram布局
- 滚动行为，动画
- 预览、选择、取消选择操作逻辑
✅ 主题和语言定制
✅ 多张图片选择（具有最大限制）
✅ 从 1:1 到 4:5 的宽高比选择
✅ 一次裁剪所有图片并接收带有进度值的流
❌ 不支持视频

📸 截图

布局和滚动	裁剪

📖 安装

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

insta_assets_picker: ^1.2.2

‼️ 不要跳过这一部分

由于该包是 flutter_wechat_assets_picker 的自定义委托，因此你必须遵循安装指南：安装指南。

👀 使用

更多详细信息，请查看示例代码。

Future<List<AssetEntity>?> callPicker() => InstaAssetPicker.pickAssets(
    context,
    title: '选择图片',
    maxAssets: 10,
    onCompleted: (Stream<InstaAssetsExportDetails> stream) {
        // TODO : 处理裁剪流结果
        // 即：使用 StreamBuilder 显示
        // - 在同一页面（closeOnComplete=true）
        // - 发送到另一个页面（closeOnComplete=false）
        // 或使用 `stream.listen` 手动处理数据到你的状态管理器
        // - ...
    },
);

InstaAssetsExportDetails 中的字段：

名称	类型	描述
croppedFiles	`<List<File>>`	所有裁剪文件的列表
selectedAssets	`<List<AssetEntity>>`	未裁剪的选择的资产
aspectRatio	`<double>`	选择的宽高比 (1 或 4/5)
progress	`<double>`	导出进度指示器（介于 0 和 1 之间）

Picker配置

请遵循 flutter_wechat_assets_picker 文档：配置

本地化

请遵循 flutter_wechat_assets_picker 文档：本地化

主题定制

大多数选择器组件都可以通过主题进行定制。

// 基于应用主题主颜色设置选择器主题
final theme = InstaAssetPicker.themeData(Theme.of(context).primaryColor);

InstaAssetPicker.pickAssets(
    context,
    title: '选择图片',
    pickerTheme: theme.copyWith(
      canvasColor: Colors.black, // 背景颜色
      splashColor: Colors.grey, // 点击溅色
      colorScheme: theme.colorScheme.copyWith(
        background: Colors.black87, // 相册列表背景颜色
      ),
      appBarTheme: theme.appBarTheme.copyWith(
        backgroundColor: Colors.black, // 应用栏背景颜色
        titleTextStyle: Theme.of(context)
            .appBarTheme
            .titleTextStyle
            ?.copyWith(color: Colors.white), // 更改应用栏标题文本样式以匹配应用主题
      ),
    ),
    onCompleted: (_) {},
);

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

sinazl 1楼

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

当然，以下是如何在Flutter项目中使用insta_assets_picker_new插件来选择图片的示例代码。这个插件允许用户从设备图库中选择图片，并获取它们的文件路径。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  insta_assets_picker_new: ^最新版本号  # 请替换为最新的版本号

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

2. 导入插件

在你需要使用图片选择功能的Dart文件中导入插件：

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

3. 使用插件选择图片

下面是一个完整的示例，展示如何使用insta_assets_picker_new来选择图片并在UI中显示它们：

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

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

class ImagePickerScreen extends StatefulWidget {
  @override
  _ImagePickerScreenState createState() => _ImagePickerScreenState();
}

class _ImagePickerScreenState extends State<ImagePickerScreen> {
  List<Asset> _assets = [];

  Future<void> _pickAssets() async {
    final List<Asset> resultList = await InstaAssetsPicker.pickAssets(
      count: 5,  // 允许选择的图片数量
      pickType: PickType.image,
      includeVideo: false,
    );

    setState(() {
      _assets = resultList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Demo'),
      ),
      body: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: _pickAssets,
            child: Text('Pick Images'),
          ),
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0,
              ),
              itemCount: _assets.length,
              itemBuilder: (BuildContext context, int index) {
                Asset asset = _assets[index];
                return Image.file(
                  File(asset.identifier),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

注意事项

权限处理：确保在AndroidManifest.xml和Info.plist中添加了必要的权限，例如读取存储权限。
错误处理：在实际应用中，你应该添加错误处理逻辑来处理可能的异常，例如用户取消选择或权限被拒绝。
文件路径：Asset.identifier属性返回的是文件的本地路径。在某些平台上，这个路径可能是一个临时路径，所以如果你需要长期保存这些图片，考虑将它们复制到应用的专用存储目录中。

通过上述代码，你可以在Flutter应用中实现图片选择功能。希望这对你有帮助！