Flutter媒体处理插件media_pro的使用

简介

Media Pro 是一个为Flutter应用程序提供一系列媒体相关组件的插件，可以帮助开发者更方便地在应用中集成媒体文件（如图片）的选择与上传功能。以下是关于如何使用Media Pro插件的一些指导。

Widgets

SingleImagePicker

SingleImagePicker允许用户从相册中选择并上传单个图片。你可以通过.compact或.simple来展示这个组件。

import 'package:media_pro/media_pro.dart';

SingleImagePicker.compact(
    defaultImage: "https://via.placeholder.com/150",
    apiUploadImage: ApiRequest(url: "https://myserver.test/upload-image"), 
    setImageUrlFromResponse: (response) { 
        if (response['media'] == null) return null;
            dynamic media = response['media'];
            return media['original_url'];
        },
),

GridImagePicker

GridImagePicker允许用户一次选择多个图片，并支持预览已选中的图片。

import 'package:media_pro/media_pro.dart';

GridImagePicker(
  maxImages: 8,
  defaultImages: () async {
    List<Map<String, dynamic>> data = [
      {"id": 1, "original_url": "https://via.placeholder.com/150"},
      {"id": 2, "original_url": "https://via.placeholder.com/150"},
    ]; 
    return data;
  },
  setImageUrlFromItem: (item) {
    if (item['original_url'] == null) return null;
    return item['original_url'];
  },
  apiUploadImage: ApiRequest(
    url: "https://mysite.com/uploads/animals",
    method: "post",
  ),
  imageQuality: 80,
  allowedMimeTypes: ["image/jpeg", "image/png"],
  maxSize: 1024 * 1024 * 7, // 7mb
  setMainImageFromItem: (item) {
    return false;
  },
  apiDeleteImage: (item) {
    return ApiRequest(
      url: "https://mysite.com/uploads/delete/${item['id']}",
      method: "delete",
    );
  },
  apiMainImage: (item) => ApiRequest(
    url: "https://mysite.com/main",
    method: "post",
  ),
),

Getting Started

安装

将以下内容添加到你的pubspec.yaml文件中：

dependencies:
  media_pro: ^2.0.3

或者使用Dart命令行工具安装：

dart pub add media_pro

要求

对于iOS项目，你需要在info.plist中添加权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>To upload images to your ...</string>
<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>

示例代码

下面是一个简单的例子，展示了如何在Flutter项目中使用Media Pro插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Media Pro',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Media Pro")),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 8),
          width: double.infinity,
          child: ListView(
            shrinkWrap: true,
            children: [
              SingleImagePicker.compact(
                maxSize: 1024 * 1024 * 7,
                setImageUrlFromResponse: (response) {
                  if (response['media'] == null) return null;
                  dynamic media = response['media'];
                  return media['original_url'];
                },
                apiUploadImage: ApiRequest(
                  url: "https://mysite.com/upload/animals",
                  method: "post",
                  postData: {"name": "dog"},
                  headers: {"Authorization": "Bearer token here"},
                ),
                allowedMimeTypes: ["image/jpeg", "image/png"],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上就是Media Pro插件的基本用法介绍，希望对你有所帮助！如果你有任何问题或需要更多帮助，请随时查阅官方文档或访问其GitHub页面获取更多信息。