Flutter图片选择对话框插件image_picker_dialog的使用

Flutter图片选择对话框插件image_picker_dialog的使用

插件信息

• 版本:

• 大小:

• 问题数量:

• 点赞数量:

使用方法

iOS

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

<key>NSCameraUsageDescription</key>
<string>您的相机使用说明</string>
<key>NSMicrophoneUsageDescription</key>
<string>您的麦克风使用说明</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>为了访问您的照片库</string>

Android

在AndroidManifest.xml文件中添加以下配置：

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

    <application
        android:label="photo_manager_example"
        android:icon="@mipmap/ic_launcher"
        android:requestLegacyExternalStorage="true">
    </application>

</manifest>

UI 示例

完整示例代码

以下是使用image_picker_dialog插件的完整示例代码。

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

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化控制器
  final controller = GalleryController(
    gallerySetting: const GallerySetting(
      enableCamera: true,
      maximum: 19,
      requestType: RequestType.common,
      actionButton: null,
      albumColor: Colors.black,
      albumTitleStyle: TextStyle(fontSize: 16),
    ),
    panelSetting: const PanelSetting(),
    headerSetting: const HeaderSetting(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8),
        topRight: Radius.circular(8),
      ),
    ),
  );

  // 创建一个值监听器用于更新图片列表
  final notifier = ValueNotifier<List<MediaEntity>>([]);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GalleryViewWrapper(
      controller: controller,
      child: Scaffold(
        backgroundColor: Colors.green,
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 显示选中的图片
              ValueListenableBuilder(
                  valueListenable: notifier,
                  builder: (ctx, values, _) => Wrap(
                        children: [
                          for (final value in values)
                            Image.memory(
                              value.bytes,
                              width: 40,
                              height: 40,
                              fit: BoxFit.cover,
                            ),
                        ],
                      )),
              // 显示图片选择对话框
              ValueListenableBuilder<List<MediaEntity>>(
                valueListenable: notifier,
                builder: (context, list, child) {
                  return GalleryViewField(
                    controller: controller,
                    selectedEntities: list,
                    onChanged: (entity, isRemoved) {
                      final value = notifier.value.toList();
                      if (isRemoved) {
                        value.remove(entity);
                      } else {
                        value.add(entity);
                      }
                      notifier.value = value;
                    },
                    onSubmitted: (list) async {
                      notifier.value = list;
                    },
                    child: child,
                  );
                },
                child: const Icon(Icons.image, color: Colors.black, size: 24.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}