Flutter媒体设备管理插件device_media的使用

Flutter媒体设备管理插件device_media的使用

特性

  • ✅ 从相册或相机选择图片。
  • ✅ 支持压缩图片。
  • ✅ 支持裁剪图片为圆形或矩形。

示例

以下是一个完整的示例代码,展示了如何使用DeviceMediaServiceImpl来打开一个选择图片的对话框,并根据用户的选择进行压缩和裁剪操作。

import 'package:flutter/material.dart';
import 'package:device_media/device_media.dart'; // 引入device_media插件

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ImageProvider? image; // 用于存储选择的图片

  void _pickImage() async {
    try {
      final pickedImage = await DeviceMediaServiceImpl()
          .openPickImage(DeviceMediaSource.gallery, needCompress: true, needCrop: true);
      setState(() {
        image = NetworkImage(pickedImage); // 将选择的图片设置到状态中
      });
    } catch (e) {
      print("Error picking image: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (image != null)
              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  image: DecorationImage(image: image!, fit: BoxFit.cover),
                ),
              )
            else
              const Text('未选择图片'),
            ElevatedButton(
              onPressed: _pickImage,
              child: const Text('选择图片'),
            ),
          ],
        ),
      ),
    );
  }
}

原生设置

Android

AndroidManifest.xml文件中添加以下权限:

<application
    android:requestLegacyExternalStorage="true">
    <!-- 其他配置 -->
    <activity
        android:name="com.yalantis.ucrop.UCropActivity"
        android:screenOrientation="portrait"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
</application>

iOS

Info.plist文件中添加以下键值对:

<key>NSPhotoLibraryAddUsageDescription</key>
<string>允许应用访问您的照片库以上传个人资料图片?</string>
<key>NSCameraUsageDescription</key>
<string>允许应用拍照以共享。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>允许应用访问您的照片库以上传个人资料图片?</string>

更多关于Flutter媒体设备管理插件device_media的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter媒体设备管理插件device_media的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


device_media 是一个 Flutter 插件,用于管理和访问设备上的媒体文件(如照片、视频、音频等)。它提供了一种简单的方式来与设备的媒体存储进行交互。以下是使用 device_media 插件的基本步骤和示例代码。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 device_media 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  device_media: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以安装依赖。

2. 导入插件

在你的 Dart 文件中导入 device_media 插件:

import 'package:device_media/device_media.dart';

3. 使用插件

以下是使用 device_media 插件的一些常见操作示例:

获取所有照片

List<DeviceImage> photos = await DeviceMedia.getImages();
for (var photo in photos) {
  print('Photo Path: ${photo.path}');
}

获取所有视频

List<DeviceVideo> videos = await DeviceMedia.getVideos();
for (var video in videos) {
  print('Video Path: ${video.path}');
}

获取所有音频

List<DeviceAudio> audios = await DeviceMedia.getAudios();
for (var audio in audios) {
  print('Audio Path: ${audio.path}');
}

获取特定类型的媒体文件

你可以使用过滤器来获取特定类型的媒体文件。例如,获取所有 .jpg 图像:

List<DeviceImage> jpgImages = await DeviceMedia.getImages(filter: '*.jpg');
for (var image in jpgImages) {
  print('JPG Image Path: ${image.path}');
}

获取媒体文件的缩略图

String imagePath = photos[0].path;
Uint8List thumbnail = await DeviceMedia.getThumbnail(imagePath);

删除媒体文件

bool isDeleted = await DeviceMedia.deleteMedia(imagePath);
if (isDeleted) {
  print('Media deleted successfully');
} else {
  print('Failed to delete media');
}

4. 处理权限

在处理设备媒体文件时,通常需要请求用户授予访问存储的权限。你可以使用 permission_handler 插件来请求权限。

添加 permission_handler 依赖

dependencies:
  permission_handler: ^10.0.0  # 请使用最新版本

请求存储权限

import 'package:permission_handler/permission_handler.dart';

void requestStoragePermission() async {
  var status = await Permission.storage.status;
  if (!status.isGranted) {
    await Permission.storage.request();
  }
}

5. 完整示例

以下是一个完整的示例,展示了如何使用 device_media 插件获取设备上的所有照片并显示它们:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MediaScreen(),
    );
  }
}

class MediaScreen extends StatefulWidget {
  [@override](/user/override)
  _MediaScreenState createState() => _MediaScreenState();
}

class _MediaScreenState extends State<MediaScreen> {
  List<DeviceImage> photos = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    loadPhotos();
  }

  Future<void> loadPhotos() async {
    List<DeviceImage> images = await DeviceMedia.getImages();
    setState(() {
      photos = images;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Device Photos'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        itemCount: photos.length,
        itemBuilder: (context, index) {
          return Image.file(
            File(photos[index].path),
            fit: BoxFit.cover,
          );
        },
      ),
    );
  }
}
回到顶部