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

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

特性

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

示例

以下是一个简单的示例代码,展示了如何使用 easy_device_media 插件来从相册或相机选择并处理图片:

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? imagePath;

  Future<void> pickImageFromGallery() async {
    try {
      final pickedImage = await DeviceMediaServiceImpl()
          .openPickImage(DeviceMediaSource.gallery, needCompress: true);
      setState(() {
        imagePath = pickedImage;
      });
    } catch (e) {
      print('Error picking image: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Device Media Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            imagePath != null
                ? Image.file(File(imagePath!))
                : Text('No image selected'),
            ElevatedButton(
              onPressed: pickImageFromGallery,
              child: Text('Pick Image from Gallery'),
            ),
          ],
        ),
      ),
    );
  }
}

原生设置

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设备媒体管理插件easy_device_media的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然,下面是一个关于如何使用Flutter设备媒体管理插件easy_device_media的代码案例。这个插件可以帮助你访问设备的媒体文件,如图片和视频。

首先,确保你的Flutter项目中已经添加了easy_device_media依赖。在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_device_media: ^最新版本号 # 请替换为实际的最新版本号

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

接下来,是一个简单的代码示例,展示如何使用easy_device_media插件来访问设备的图片和视频。

主文件 main.dart

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<MediaItem> _images = [];
  List<MediaItem> _videos = [];

  @override
  void initState() {
    super.initState();
    _getMediaFiles();
  }

  Future<void> _getMediaFiles() async {
    try {
      // 获取图片
      List<MediaItem> images = await EasyDeviceMedia.getImages();
      setState(() {
        _images = images;
      });

      // 获取视频
      List<MediaItem> videos = await EasyDeviceMedia.getVideos();
      setState(() {
        _videos = videos;
      });
    } catch (e) {
      print('Error getting media files: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Device Media Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Images:', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBox(height: 10),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 4,
                  mainAxisSpacing: 4,
                ),
                itemCount: _images.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () {
                      // 打开图片
                      EasyDeviceMedia.openImage(_images[index].path);
                    },
                    child: Image.file(
                      File(_images[index].path),
                      fit: BoxFit.cover,
                    ),
                  );
                },
              ),
            ),
            SizedBox(height: 20),
            Text('Videos:', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBox(height: 10),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 4,
                  mainAxisSpacing: 4,
                ),
                itemCount: _videos.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () {
                      // 打开视频
                      EasyDeviceMedia.openVideo(_videos[index].path);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        image: DecorationImage(
                          image: FileImage(File(_videos[index].thumbnailPath)),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明

  1. 依赖安装:确保你已经在pubspec.yaml文件中添加了easy_device_media依赖,并运行了flutter pub get
  2. 权限请求:在实际应用中,你可能需要在AndroidManifest.xmlInfo.plist中添加相应的权限请求,以访问设备的媒体文件。
  3. 获取媒体文件:在_getMediaFiles方法中,使用EasyDeviceMedia.getImages()EasyDeviceMedia.getVideos()方法来获取设备中的图片和视频文件。
  4. 显示媒体文件:使用GridView.builder来显示获取到的图片和视频缩略图。点击图片或视频缩略图时,使用EasyDeviceMedia.openImage()EasyDeviceMedia.openVideo()方法来打开对应的媒体文件。

这个示例展示了如何使用easy_device_media插件来获取和显示设备中的媒体文件。你可以根据需要进一步扩展和定制这个示例。

回到顶部