Flutter图片处理插件android_picture_plugin的使用

Flutter图片处理插件android_picture_plugin的使用

在使用 android_picture_plugin 插件之前,你需要在 AndroidManifest.xml 文件中添加相应的权限:

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

接下来,我们通过一个完整的示例来展示如何使用 android_picture_plugin 插件。

示例代码

首先,在 example/lib/main.dart 文件中编写以下代码:

import 'dart:io';

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

import 'package:flutter/services.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  /// 照片当前状态
  String _picturesShowState = '未打开';
  /// 照片的路径
  String _pickPath = "";

  [@override](/user/override)
  void initState() {
    super.initState();
    /// 注册通道回调
    FlutterPicturePlugin.channel.setMethodCallHandler((call) => callBack(call));
  }

  /// 更新页面图片
  upDatePicture(MethodCall call) {
    if (!mounted) return;
    setState(() {
      _pickPath = call.arguments;
    });
  }

  /// 通道回调
  callBack(MethodCall call) {
    switch (call.method) {
      case "callback_photo":
        upDatePicture(call);
        break;
    }
  }

  /// 请求原生相机
  openCamera() async {
    String openCameraState;
    try {
      openCameraState = await FlutterPicturePlugin.openCamera() ?? '未检测到状态';
    } on PlatformException {
      openCameraState = '打开相机失败!';
    }

    if (!mounted) return;

    setState(() {
      _picturesShowState = openCameraState;
    });
  }

  /// 请求原生相册
  openAlbum() async {
    String openAlbumState;
    try {
      openAlbumState = await FlutterPicturePlugin.openAlbum() ?? 'Unknown openCameraState';
    } on PlatformException {
      openAlbumState = '打开相册失败!';
    }
    if (!mounted) return;

    setState(() {
      _picturesShowState = openAlbumState;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter插件 调用安卓原相机、相册'),
        ),
        body: Center(
          child: Column(
            children: [
              Container(
                child: _pickPath == "" ? Container() : Container(
                  width: 135,
                  height: 135,
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(100)),
                    image: DecorationImage(
                      image: FileImage(File(_pickPath)),
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
              Text('相机状态为: $_picturesShowState\n'),
              ElevatedButton(
                onPressed: openCamera,
                child: const Text('打开相机'),
              ),
              ElevatedButton(
                onPressed: openAlbum,
                child: const Text('打开相册'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图片处理插件android_picture_plugin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片处理插件android_picture_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


android_picture_plugin 是一个用于在 Flutter 中处理图片的插件,特别是在 Android 平台上。它可以帮助你从相册中选择图片、拍摄照片、裁剪图片等操作。以下是如何使用 android_picture_plugin 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 android_picture_plugin 的依赖:

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

然后运行 flutter pub get 来获取依赖。

2. 导入插件

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

import 'package:android_picture_plugin/android_picture_plugin.dart';

3. 使用插件功能

3.1 从相册中选择图片

你可以使用 AndroidPicturePlugin.pickImageFromGallery() 方法从相册中选择图片。

Future<void> pickImageFromGallery() async {
  try {
    final String imagePath = await AndroidPicturePlugin.pickImageFromGallery();
    if (imagePath != null) {
      print('Selected image path: $imagePath');
      // 在这里处理图片路径,例如显示图片
    } else {
      print('No image selected.');
    }
  } catch (e) {
    print('Failed to pick image: $e');
  }
}

3.2 拍照

你可以使用 AndroidPicturePlugin.takePhoto() 方法来拍照。

Future<void> takePhoto() async {
  try {
    final String imagePath = await AndroidPicturePlugin.takePhoto();
    if (imagePath != null) {
      print('Captured image path: $imagePath');
      // 在这里处理图片路径,例如显示图片
    } else {
      print('No image captured.');
    }
  } catch (e) {
    print('Failed to take photo: $e');
  }
}

3.3 裁剪图片

你可以使用 AndroidPicturePlugin.cropImage() 方法来裁剪图片。

Future<void> cropImage(String imagePath) async {
  try {
    final String croppedImagePath = await AndroidPicturePlugin.cropImage(imagePath);
    if (croppedImagePath != null) {
      print('Cropped image path: $croppedImagePath');
      // 在这里处理裁剪后的图片路径,例如显示图片
    } else {
      print('No image cropped.');
    }
  } catch (e) {
    print('Failed to crop image: $e');
  }
}

4. 处理权限

在 Android 上,访问相册和相机需要相应的权限。你需要在 AndroidManifest.xml 文件中添加以下权限:

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

此外,你还需要在运行时请求这些权限。你可以使用 permission_handler 插件来处理运行时权限。

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  if (await Permission.camera.request().isGranted && await Permission.storage.request().isGranted) {
    // 权限已授予,可以继续操作
  } else {
    // 权限被拒绝,提示用户
  }
}

5. 完整示例

以下是一个完整的示例,展示了如何从相册中选择图片、拍照并裁剪图片:

import 'package:flutter/material.dart';
import 'package:android_picture_plugin/android_picture_plugin.dart';
import 'package:permission_handler/permission_handler.dart';

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

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

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

class _PictureExampleState extends State<PictureExample> {
  String _imagePath;

  Future<void> pickImageFromGallery() async {
    try {
      final String imagePath = await AndroidPicturePlugin.pickImageFromGallery();
      if (imagePath != null) {
        setState(() {
          _imagePath = imagePath;
        });
      } else {
        print('No image selected.');
      }
    } catch (e) {
      print('Failed to pick image: $e');
    }
  }

  Future<void> takePhoto() async {
    try {
      final String imagePath = await AndroidPicturePlugin.takePhoto();
      if (imagePath != null) {
        setState(() {
          _imagePath = imagePath;
        });
      } else {
        print('No image captured.');
      }
    } catch (e) {
      print('Failed to take photo: $e');
    }
  }

  Future<void> cropImage() async {
    if (_imagePath == null) return;
    try {
      final String croppedImagePath = await AndroidPicturePlugin.cropImage(_imagePath);
      if (croppedImagePath != null) {
        setState(() {
          _imagePath = croppedImagePath;
        });
      } else {
        print('No image cropped.');
      }
    } catch (e) {
      print('Failed to crop image: $e');
    }
  }

  Future<void> requestPermissions() async {
    if (await Permission.camera.request().isGranted && await Permission.storage.request().isGranted) {
      // 权限已授予,可以继续操作
    } else {
      // 权限被拒绝,提示用户
    }
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Picture Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imagePath != null
                ? Image.file(File(_imagePath))
                : Text('No image selected.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickImageFromGallery,
              child: Text('Pick Image from Gallery'),
            ),
            ElevatedButton(
              onPressed: takePhoto,
              child: Text('Take Photo'),
            ),
            ElevatedButton(
              onPressed: cropImage,
              child: Text('Crop Image'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部