Flutter图片选择插件gallery_picker的使用

gallery_picker简介

gallery_picker 是一个Flutter包，它允许您从相册中选择媒体文件，并且提供了现代化的工具和视图来管理和浏览您的相册。

主要特性

• [✔] 现代化设计
• [✔] 详细的文档
• [✔] 单个或多个媒体文件的选择
• [✔] 底部弹出式布局（BottomSheet）
• [✔] 自动本地化最近的选项卡
• [✔] 获取手机上的所有媒体文件
• [✔] 高度可定制的设计（目标页面、英雄目标页面等）
• [✔] 监听器功能以监听相册选择中的文件变化
• [✔] 缩略图小部件用于显示媒体文件
• [✔] 媒体提供者小部件用于查看视频/图像文件
• [✔] GalleryPickerBuilder流构建器用于更新设计
• [✔] 提供了即用型的小部件
• [✔] 内置权限请求处理
• [✔] 支持null-safety

示例代码

下面是一个完整的示例代码，演示如何使用 gallery_picker 插件进行单个或多个媒体文件的选择。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      home: MyHomePage(title: "Gallery Picker"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<MediaFile> selectedMedias = [];

  Future<void> pickMedia() async {
    List<MediaFile>? media = await GalleryPicker.pickMedia(
      context: context,
      initSelectedMedia: selectedMedias,
      extraRecentMedia: selectedMedias,
      startWithRecent: true,
    );
    if (media != null) {
      setState(() {
        selectedMedias += media;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Spacer(),
            const Text('These are your selected medias'),
            const Divider(),
            Expanded(
              flex: 5,
              child: Stack(children: [
                if (selectedMedias.isNotEmpty)
                  PageView.builder(
                    itemCount: selectedMedias.length,
                    itemBuilder: (context, index) {
                      return Center(
                        child: MediaProvider(
                          media: selectedMedias[index],
                        ),
                      );
                    },
                  ),
                if (selectedMedias.isNotEmpty)
                  Align(
                    alignment: Alignment.centerRight,
                    child: TextButton(
                      onPressed: () {},
                      child: const Icon(Icons.chevron_right, size: 100, color: Colors.red),
                    ),
                  ),
                if (selectedMedias.isNotEmpty)
                  Align(
                    alignment: Alignment.centerLeft,
                    child: TextButton(
                      onPressed: () {},
                      child: const Icon(Icons.chevron_left, size: 100, color: Colors.red),
                    ),
                  ),
              ]),
            ),
            SizedBox(
              height: 65,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: selectedMedias.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5),
                    child: TextButton(
                      onPressed: () {},
                      child: Container(
                        width: 65,
                        height: 50,
                        decoration: BoxDecoration(border: Border.all(width: 2)),
                        child: ThumbnailMedia(media: selectedMedias[index]),
                      ),
                    ),
                  );
                },
              ),
            ),
            const Spacer(flex: 2),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: pickMedia,
        tooltip: 'Pick Media',
        child: const Icon(Icons.add),
      ),
    );
  }
}

使用步骤

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  gallery_picker: ^最新版本号

2. 配置项目

根据平台不同，需要配置一些权限和设置。

Android

• 更新 build.gradle 文件中的 Kotlin 版本和 Gradle 插件版本。
• 在 AndroidManifest.xml 中添加权限声明：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- For SDK 33 and above -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

iOS

• 在 Info.plist 文件中添加必要的权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>Privacy - Photo Library Usage Description</string>
<key>NSMotionUsageDescription</key>
<string>Motion usage description</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>NSPhotoLibraryAddUsageDescription</string>

3. 使用插件

通过调用 GalleryPicker.pickMedia 方法可以选择单个或多个媒体文件。还可以使用其他高级功能如监听文件选择变化、自定义目的地页面等。

以上就是 gallery_picker 的基本使用方法和完整示例代码。希望对您有所帮助！如果有任何问题，请随时提问。