Flutter图片裁剪插件simple_image_crop_plus的使用

Flutter 图片裁剪插件 simple_image_crop_plus 的使用

simple_image_crop_plus 是一个简单易用的 Flutter 插件，可以在 iOS 和 Android 上进行图片裁剪。以下是如何在 Flutter 应用程序中使用该插件的详细步骤。

安装

首先，在 pubspec.yaml 文件中添加 simple_image_crop_plus 依赖：

dependencies:
  simple_image_crop_plus: ^版本号

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

使用

创建一个加载和编辑图像的小部件

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:simple_image_crop_plus/simple_image_crop_plus.dart';

class MyHomeRoute extends StatefulWidget {
  [@override](/user/override)
  _MyHomeRouteState createState() => new _MyHomeRouteState();
}

class _MyHomeRouteState extends State<MyHomeRoute> {
  final cropKey = GlobalKey<ImgCropState>();

  Future<void> getImage(_sheetType type) async {
    var image = await ImagePicker().pickImage(
        source: type == _sheetType.gallery
            ? ImageSource.gallery
            : ImageSource.camera);
    if (image == null) return;
    Navigator.of(context).pop();
    Navigator.of(context).pushNamed('crop_page', arguments: {'image': image});
  }

  void _showActionSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return SafeArea(
            child: Column(
              mainAxisSize: MainAxisSize.min, // 设置最小的弹出
              children: <Widget>[
                new ListTile(
                  leading: new Icon(Icons.photo_camera),
                  title: new Text("相机拍照"),
                  onTap: () async {
                    getImage(_sheetType.camera);
                  },
                ),
                new ListTile(
                  leading: new Icon(Icons.photo_library),
                  title: new Text("相册选择"),
                  onTap: () async {
                    getImage(_sheetType.gallery);
                  },
                ),
              ],
            ),
          );
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('选择图片'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showActionSheet,
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}

生成裁剪后的图像

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

class _SimpleCropRouteState extends State<SimpleCropRoute> {
  final cropKey = GlobalKey<ImgCropState>();

  Future<void> showImage(BuildContext context, File file) async {
    new FileImage(file)
        .resolve(new ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) {
      print('-------------------------------------------$info');
    }));
    return showDialog<void>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text(
                '当前截图：',
                style: TextStyle(
                    fontFamily: 'Roboto',
                    fontWeight: FontWeight.w300,
                    color: Theme.of(context).primaryColor,
                    letterSpacing: 1.1),
              ),
              content: Image.file(file));
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final Map args = ModalRoute.of(context)?.settings.arguments as Map;
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text(
            '缩放和裁剪',
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          leading: new IconButton(
            icon:
                new Icon(Icons.navigate_before, color: Colors.black, size: 40),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: Center(
          child: ImgCrop(
            key: cropKey,
            // chipRadius: 100,
            // chipShape: 'rect',
            maximumScale: 3,
            image: FileImage(args['image']),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            final croppedFile =
                await cropKey.currentState!.cropCompleted(args['image'], pictureQuality: 600);
            showImage(context, croppedFile);
          },
          tooltip: '增加',
          child: Text('裁剪'),
        ));
  }
}