Flutter媒体选择插件media_picker_widget的使用

media_picker_widget 是一个方便在Flutter应用中选择媒体文件（如图片和视频）的插件。它支持单选或复选，并且可以自定义UI。以下是如何安装和使用这个插件的详细指南。

安装

在 pubspec.yaml 中添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  media_picker_widget: ^1.0.6 # 请确认这是最新版本

运行 flutter pub get 来安装依赖。

Android 配置

在 <project root>/android/app/src/main/AndroidManifest.xml 文件中添加权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<!-- 如果你的app目标SDK是33 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

确保 minSdkVersion 设置为21以上：

android {
    ...
    defaultConfig {
        ...
        minSdkVersion 21
    }
}

iOS 配置

在 <project root>/ios/Runner/Info.plist 文件中添加以下键值对：

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册来选择图片。</string>
<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机来拍摄图片。</string>
<key>NSMicrophoneUsageDescription</key>
<string>我们需要访问您的麦克风来录制视频。</string>

使用

基本使用

导入包并创建一个简单的示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<Media> mediaList = [];

  void openImagePicker(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return MediaPicker(
          mediaList: mediaList,
          onPicked: (selectedList) {
            setState(() => mediaList = selectedList);
            Navigator.pop(context);
          },
          onCancel: () => Navigator.pop(context),
          mediaCount: MediaCount.multiple,
          mediaType: MediaType.all,
          decoration: PickerDecoration(
            blurStrength: 0,
            scaleAmount: 1,
            counterBuilder: (context, index) {
              if (index == null) return SizedBox();
              return Align(
                alignment: Alignment.topRight,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  padding: EdgeInsets.all(4),
                  child: Text(
                    '$index',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              );
            },
          ),
        );
      },
    );
  }

  Widget previewList() {
    return SizedBox(
      height: 96,
      child: ListView(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        children: List.generate(
          mediaList.length,
          (index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: SizedBox(
              height: 80,
              width: 80,
              child: mediaList[index].thumbnail == null
                  ? SizedBox()
                  : Image.memory(
                      mediaList[index].thumbnail!,
                      fit: BoxFit.cover,
                    ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker'),
      ),
      body: previewList(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => openImagePicker(context),
      ),
    );
  }
}

自定义UI

你可以通过 PickerDecoration 类来自定义UI，甚至可以通过 HeaderBuilder 自定义头部。

headerBuilder: (context, albumPicker, onDone, onCancel) {
  return SizedBox(
    height: 46.0,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(onPressed: onCancel, child: const Text('Back')),
        Expanded(child: Center(child: albumPicker)),
        TextButton(onPressed: onDone, child: const Text('Done')),
      ],
    ),
  );
},

以上就是 media_picker_widget 的基本使用方法和一些自定义选项。更多细节和API参考可以查看 官方文档。希望这些信息对你有帮助！