Flutter资源选择插件simple_asset_picker的使用

Flutter资源选择插件simple_asset_picker的使用

simple_asset_picker 插件介绍

simple_asset_picker 是一个参考了 KakaoTalk UI 设计的 Flutter 图片选择插件。它仅支持 Android 和 iOS 平台，并且依赖于 photo_manager、flutter_riverpod 和 video_player 这些库。该插件支持照片和视频的选择、拍摄、预览等功能。

使用方法

添加依赖

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

dependencies:
  simple_asset_picker: 最新版本使用

Android 部署

在 AndroidManifest.xml 中添加权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_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_AUDIO" />
<uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED" />
<uses-permission android:name="android.permission.INTERNET" />

确保 Gradle 版本（gradle-wrapper.properties）为 7.5.1 及以上，Kotlin 版本（ext.kotlin_version）为 1.7.22 及以上，AGP 版本（com.android.tools.build:gradle）为 7.2.2 及以上。

修改 build.gradle 中的最小 SDK 版本：

defaultConfig {
    ...
    minSdkVersion 22
    ...
}

iOS 部署

在 Info.plist 中添加权限设置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>ギャラリーアクセス権限が必要です.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>写真や動画の撮影を行うための権限が必要です.</string>
<key>NSCameraUsageDescription</key>
<string>カメラアクセス権限が必要です.</string>
<key>NSMicrophoneUsageDescription</key>
<string>映像撮影のために必要な権限です.</string>
<!-- localize -->
<key>CFBundleDevelopmentRegion</key>
<array>
  <string>ko-KR</string>
  <string>en-US</string>
</array>
<key>CFBundleLocalizations</key>
<array>
  <string>ko-KR</string>
  <string>en-US</string>
</array>

如果权限被拒绝，会显示“权限未授予”信息。为了确保权限总是被授予，可以使用 permission_handler 库来处理权限请求：

import 'package:permission_handler/permission_handler.dart';

void main() async {
  await PermissionHandler().request();
  runApp(const ProviderScope(child: MyApp()));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<AssetEntity> list = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          ElevatedButton(
            onPressed: () async {
              list = await Picker.pickAssets(
                context,
                pickerConfig: PickerConfig(
                  mainColor: Colors.green,
                  brightness: Brightness.light,
                  gridCount: 3,
                  maxAssets: 10,
                  pageSize: 30,
                  requestType: RequestType.common,
                  selectedAssets: list,
                  useCamera: true,
                ),
              );
              setState(() {});
            },
            child: const Text('사진선택'),
          ),
          const SizedBox(
            height: 50,
          ),
          Container(
            color: Colors.grey[200],
            height: list.isEmpty ? 0 : 120,
            padding: const EdgeInsets.symmetric(
              vertical: 5,
              horizontal: 15,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const Text('선택한 사진'),
                Expanded(
                  child: ListView.separated(
                    scrollDirection: Axis.horizontal,
                    itemCount: list.length,
                    itemBuilder: (_, index) {
                      return SizedBox(
                        width: 100,
                        child: Stack(
                          fit: StackFit.expand,
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(5),
                              child: AssetEntityImage(
                                list[index],
                                isOriginal: false,
                                thumbnailSize: const ThumbnailSize.square(80),
                                fit: BoxFit.contain,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                    separatorBuilder: (_, __) {
                      return const SizedBox(
                        width: 5,
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}