Flutter图片裁剪压缩插件flutter_image_crop_compress的使用

Flutter图片裁剪压缩插件flutter_image_crop_compress的使用

flutter_image_crop_compress 插件介绍

flutter_image_crop_compress 是一个用于 Flutter 的的插件，它可以对图片进行裁剪和压缩，并提供了一个可定制的裁剪控件 Crop。这个插件非常灵活，可以放置在任何地方，甚至可以在对话框或底部弹窗中使用。裁剪方法也可以自定义，例如固定图像并移动裁剪区域、固定裁剪区域并缩放/平移图像，或者两者都配置。

使用示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? file;
  bool isProcessing = false;
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (isProcessing)
              const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  Text(
                    "Processing image",
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 22)
                ],
              ),
            Text(
              file != null ? "Image Picked" : 'Pick image',
            ),
            const SizedBox(height: 22),
            file != null
                ? Image.file(
                    file!,
                    fit: BoxFit.fill,
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height / 2.5,
                  )
                : const SizedBox(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          imagePicker(context);
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Future<void> imagePicker(BuildContext context, {bool isGallery = true}) async {
    isProcessing = true;
    updateState();
    File? fileImage = await pickImage(context, isGallery: isGallery);
    if (fileImage != null && context.mounted) {
      await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) =&gt; ImageCompressCropPage(
            appBar: AppBar(
              key: const Key("appBarCrop"),
              title: const Text("Edit Image"),
            ),
            imageFile: fileImage,
            addAnimation: () =&gt; loadingAnimation(context),
            onTap: (File image) {
              file = image;
              updateState();
            },
          ),
        ));
    }
    isProcessing = false;
    updateState();
  }

  updateState() {
    if (mounted) {
      setState(() {});
    }
  }

  static Future&lt;File?&gt; pickImage(BuildContext context, {bool isGallery = true}) async {
    try {
      File? fileImage;
      final picker = ImagePicker();
      XFile? pickedFile;
      if (isGallery {
        pickedFile = await picker.pickImage(
          source: ImageSource.gallery, imageQuality: 80);
      } else {
        pickedFile = await picker.pickImage(
          source: ImageSource.camera, imageQuality: 80);
      }
      if ( (pickedFile != null &amp;&amp; pickedFile.path.isNotEmpty) {
        fileImage = File(pickedFile.path);
      } else {
        fileImage = null;
      }
      return fileImage;
    } catch (e) {
      return null;
    }
  }

  Future&lt;void&gt; loadingAnimation(BuildContext context) async =&gt; showDialog(
    context: context,
    builder: ( context) =&gt; const CircularProgress(color: Colors.red));
  }
}