Flutter相册访问与管理插件r_album的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter相册访问与管理插件r_album的使用

插件介绍

r_album 是一个用于在Flutter中保存图片或视频文件到相册的插件,支持Android和iOS平台。它提供了创建新相册、将文件保存到相册的功能。

使用示例代码

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:r_album/r_album.dart';
import 'package:r_album_example/video_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File _file;
  bool _isSaving;
  bool isClickVideo;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: _isSaving == true
            ? Center(child: CircularProgressIndicator())
            : ListView(
                children: [
                  _buildPickedImage(),
                  _buildImagePickerButton(),
                  _buildVideoPickerButton(),
                  _buildSaveToAlbumButton(),
                  _buildCreateAlbumButton(),
                ],
              ),
      ),
    );
  }

  Widget _buildPickedImage() {
    return Container(
      margin: EdgeInsets.all(1),
      height: 300.0,
      child: isClickVideo != null
          ? isClickVideo
              ? VideoWidget(file: _file)
              : Image.file(_file, fit: BoxFit.fill)
          : Center(child: Text("No selected image or video")),
      decoration: isClickVideo != null
          ? null
          : BoxDecoration(border: Border.all(width: 1)),
    );
  }

  Widget _buildImagePickerButton() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            tooltip: 'select image from camera',
            icon: Icon(Icons.camera_alt),
            onPressed: () async {
              var image = await ImagePicker.pickImage(source: ImageSource.camera);
              if (image != null) {
                isClickVideo = false;
                setState(() {
                  _file = image;
                });
              }
            },
          ),
          IconButton(
            tooltip: 'select image from gallery',
            icon: Icon(Icons.folder),
            onPressed: () async {
              var image = await ImagePicker.pickImage(source: ImageSource.gallery);
              if (image != null) {
                isClickVideo = false;
                setState(() {
                  _file = image;
                });
              }
            },
          ),
        ],
      ),
    );
  }

  Widget _buildVideoPickerButton() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            tooltip: 'select video from camera',
            icon: Icon(Icons.videocam),
            onPressed: () async {
              var video = await ImagePicker.pickVideo(source: ImageSource.camera);
              if (video != null) {
                isClickVideo = true;
                setState(() {
                  _file = video;
                });
              }
            },
          ),
          IconButton(
            tooltip: 'select video from gallery',
            icon: Icon(Icons.folder),
            onPressed: () async {
              var video = await ImagePicker.pickVideo(source: ImageSource.gallery);
              if (video != null) {
                isClickVideo = true;
                setState(() {
                  _file = video;
                });
              }
            },
          ),
        ],
      ),
    );
  }

  Widget _buildSaveToAlbumButton() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 1.0),
      child: RaisedButton(
        color: Colors.blue,
        textColor: Colors.white,
        child: Text("Save to album"),
        onPressed: () async {
          setState(() {
            _isSaving = true;
          });
          if (_file != null) {
            if (await canReadStorage()) {
              bool isSuccess = await RAlbum.saveAlbum(
                "MyTestAlbum",
                [_file.path, _file.path],
              );
              print('保存图片到相册是否成功:$isSuccess');
              setState(() {
                _isSaving = false;
              });
            }
          } else {
            setState(() {
              _isSaving = false;
            });
          }
        },
      ),
    );
  }

  Future<bool> canReadStorage() async {
    if (Platform.isIOS) return true;
    var status = await PermissionHandler().checkPermissionStatus(PermissionGroup.storage);
    if (status != PermissionStatus.granted) {
      var future = await PermissionHandler().requestPermissions([PermissionGroup.storage]);
      for (final item in future.entries) {
        if (item.value != PermissionStatus.granted) {
          return false;
        }
      }
    } else {
      return true;
    }
    return true;
  }

  Widget _buildCreateAlbumButton() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 1.0),
      child: RaisedButton(
        color: Colors.blue,
        textColor: Colors.white,
        child: Text("Create a album named MyTestAlbum"),
        onPressed: () async {
          if (await canReadStorage()) {
            setState(() {
              _isSaving = true;
            });
            bool isSuccess = await RAlbum.createAlbum("MyTestAlbum");
            print('创建相册是否成功:$isSuccess');
            setState(() {
              _isSaving = false;
            });
          }
        },
      ),
    );
  }
}

示例说明

  1. 添加依赖

    dependencies:
      r_album: lastVersion
    
  2. 导入插件

    import 'package:r_album/r_album.dart';
    
  3. 创建新相册

    bool isSuccess = await RAlbum.createAlbum("your album name");
    
  4. 保存图片或视频到相册

    bool isSuccess = await RAlbum.saveAlbum("your album name", ["file1", "file2"]);
    
  5. 权限检查

    Future<bool> canReadStorage() async {
      if (Platform.isIOS) return true;
      var status = await PermissionHandler().checkPermissionStatus(PermissionGroup.storage);
      if (status != PermissionStatus.granted) {
        var future = await PermissionHandler().requestPermissions([PermissionGroup.storage]);
        for (final item in future.entries) {
          if (item.value != PermissionStatus.granted) {
            return false;
          }
        }
      } else {
        return true;
      }
      return true;
    }
    

更多关于Flutter相册访问与管理插件r_album的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相册访问与管理插件r_album的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用r_album插件来访问和管理相册的示例代码。r_album插件允许Flutter应用程序访问设备的相册,选择图片,并进行一些基本的管理操作。

首先,确保你已经在你的pubspec.yaml文件中添加了r_album依赖:

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

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

接下来,你需要配置一些必要的权限,特别是在Android和iOS平台上。

Android 配置

android/app/src/main/AndroidManifest.xml中添加以下权限:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS 配置

ios/Runner/Info.plist中添加以下权限:

<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>We need access to save photos to your photo library</string>

Flutter 代码示例

以下是一个完整的Flutter应用程序示例,展示了如何使用r_album插件来访问和管理相册:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AlbumScreen(),
    );
  }
}

class AlbumScreen extends StatefulWidget {
  @override
  _AlbumScreenState createState() => _AlbumScreenState();
}

class _AlbumScreenState extends State<AlbumScreen> {
  List<RAlbumAsset> _selectedAssets = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Album Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0,
              ),
              itemCount: _selectedAssets.length,
              itemBuilder: (context, index) {
                return Image.file(
                  File(_selectedAssets[index].filePath),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              try {
                var result = await RAlbum.openPicker(
                  pickerConfig: RPickerConfig(
                    maxCount: 9,
                  ),
                );
                setState(() {
                  _selectedAssets = result.assets;
                });
              } catch (e) {
                print(e);
              }
            },
            child: Text('Select Photos'),
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖安装:在pubspec.yaml中添加r_album依赖,并运行flutter pub get
  2. 权限配置:在Android和iOS平台上配置必要的权限。
  3. UI构建
    • 创建一个基本的Flutter应用程序,包含一个GridView来显示选中的图片。
    • 使用RAlbum.openPicker方法打开相册选择器,允许用户选择图片。
    • 选中的图片会存储在_selectedAssets列表中,并在GridView中显示。

这个示例展示了如何使用r_album插件来访问设备相册并显示选中的图片。你可以根据需要进一步扩展和自定义这个示例。

回到顶部