Flutter图片裁剪插件easy_image_cropper的使用

Flutter图片裁剪插件easy_image_cropper的使用

easy_image_cropper 是一个简单的图片裁剪小部件，可以轻松地裁剪头像和其他图片。它确保在iOS和Android上具有一致的裁剪体验。

快速开始 🚀

1. 安装这个包。

   flutter pub get easy_image_cropper
   

使用方法

步骤1：创建裁剪UI

使用 ImgCrop 组件来创建裁剪UI。UI的大小由其父容器决定。

///...
Center(
  child: ImgCrop(
    key: cropKey, // 必须是一个 GlobalKey
    chipShape: ChipShape.circle, // 裁剪形状为圆形
    maximumScale: 1, // 最大缩放比例
    image: FileImage(File(img.path)), // 图片文件
  ),
)

注意：cropKey 必须是一个 GlobalKey

步骤2：获取裁剪后的图片

final crop = cropKey.currentState;
final croppedFile = await crop.cropCompleted(File(img.path), pictureQuality: 900);
// `pictureQuality` 表示裁剪后图片的质量

示例代码

以下是一个完整的示例代码，展示如何使用 easy_image_cropper 插件进行图片裁剪。

import 'dart:io';
import 'dart:async';

import 'package:easy_image_cropper/easy_image_cropper.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

enum SheetType { gallery, camera }

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      routes: {
        "crop_page": (context) => const SimpleCropRoute(),
        "/": (context) => const MyHomeRoute()
      },
    );
  }
}

class MyHomeRoute extends StatefulWidget {
  const MyHomeRoute({super.key});

  [@override](/user/override)
  MyHomeRouteState createState() => MyHomeRouteState();
}

class MyHomeRouteState extends State<MyHomeRoute> {
  final cropKey = GlobalKey<ImgCropState>();
  final _picker = ImagePicker();

  Future getImage(type) async {
    var image = await _picker.pickImage(
        source: type == SheetType.gallery
            ? ImageSource.gallery
            : ImageSource.camera);
    if (image == null) return;
    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>[
                ListTile(
                  leading: const Icon(Icons.photo_camera),
                  title: const Text("photo camera"),
                  onTap: () async {
                    getImage(SheetType.camera);
                  },
                ),
                ListTile(
                  leading: const Icon(Icons.photo_library),
                  title: const Text("photo library"),
                  onTap: () async {
                    getImage(SheetType.gallery);
                  },
                ),
              ],
            ),
          );
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('select image'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showActionSheet,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class SimpleCropRoute extends StatefulWidget {
  const SimpleCropRoute({super.key});

  [@override](/user/override)
  SimpleCropRouteState createState() => SimpleCropRouteState();
}

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

  Future<Null> showImage(BuildContext context, File file) async {
    return showDialog<Null>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text(
                'Current screenshot：',
                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 dynamic args = ModalRoute.of(context)!.settings.arguments;
    XFile img = args['image'];
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: const Text(
            'Zoom and Crop',
            style: TextStyle(color: Colors.black),
          ),
          backgroundColor: Colors.white,
          leading: IconButton(
            icon: const Icon(Icons.navigate_before,
                color: Colors.black, size: 40),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: Center(
          child: ImgCrop(
            key: cropKey,
            chipShape: ChipShape.circle,
            maximumScale: 1,
            image: FileImage(File(img.path)),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            final crop = cropKey.currentState;
            final croppedFile =
                await crop!.cropCompleted(File(img.path), pictureQuality: 900);
            showImage(context, croppedFile);
          },
          tooltip: 'Increment',
          child: const Text('Crop'),
        ));
  }
}