Flutter Instagram风格选择器插件picker_instagram的使用

Flutter Instagram风格选择器插件 picker_instagram 的使用

picker_instagram 是一个用于从图库中选择图片或视频（或两者）的 Flutter 插件，其界面风格类似于 Instagram。以下是该插件的详细使用说明和一个完整的示例代码。

1. 添加依赖

在 pubspec.yaml 文件中添加 picker_instagram 依赖项。请确保使用最新版本，如果遇到问题可以尝试使用之前的版本。

dependencies:
  flutter:
    sdk: flutter

  # 添加 picker_instagram 依赖
  picker_instagram: ^{latest version}

2. 导入必要的包

在 Dart 代码中导入 picker_instagram 包：

import 'package:picker_instagram/picker_instagram.dart';

3. 使用代码

以下是一个完整的示例代码，展示了如何使用 picker_instagram 插件来选择图片或视频，并在选择完成后执行相应的逻辑。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Picker Instagram Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Picker Instagram Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 调用 Instagram 风格的选择器
            PickerInstagram.instagramPicker(
              context,
              type: PickerInsta.both, // 选择图片和视频
              onComplete: (value) {
                // 在这里处理选择后的逻辑
                if (value != null) {
                  // value 是一个 List<Media>，包含选中的媒体文件
                  for (var media in value) {
                    print('Selected media path: ${media.path}');
                    print('Selected media type: ${media.type}');
                  }
                }
              },
            );
          },
          child: Text('选择图片或视频'),
        ),
      ),
    );
  }
}

4. 权限配置

为了使插件正常工作，您需要在 AndroidManifest.xml 和 Info.plist 文件中添加必要的权限。

Android

在 AndroidManifest.xml 中添加以下权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourcompany.yourpackage">

  <!-- 添加网络权限 -->
  <uses-permission android:name="android.permission.INTERNET" />

  <!-- 必须的权限 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED" />

  <application
    ...
  </application>
</manifest>

iOS

在 Info.plist 文件中添加以下权限描述：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...

  <!-- 必须的权限 -->
  <key>NSCameraUsageDescription</key>
  <string>我们需要访问您的相机以选择照片或视频。</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>我们需要访问您的麦克风以录制视频。</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>我们需要访问您的相册以选择和上传照片。</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>我们需要访问您的相册以保存照片。</string>

</dict>
</plist>