Flutter多图裁剪选择插件multi_crop_picker的使用

Flutter多图裁剪选择插件multi_crop_picker的使用

特性

选择并裁剪单个或多个图像。

开始前

在使用此插件之前，需要处理照片权限问题。

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下内容：

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

iOS

在 ios/Info.plist 文件中添加以下内容：

<key>NSPhotoLibraryUsageDescription</key>
<string>photo permission required.</string>

使用方法

你可以通过以下代码来选择并裁剪最多3张图片，每张图片的预览高度为屏幕宽度，并且保持1:1的宽高比。

List<Uint8List>? res = await MultiCropPicker.selectMedia(
    context,
    maxLength: 3,
    previewHeight: MediaQuery.of(context).size.width,
    aspectRatio: 1);

完整示例代码

以下是一个完整的示例代码，展示了如何使用 multi_crop_picker 插件来选择并裁剪图片。

import 'dart:typed_data';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<Uint8List>? photos;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
                onPressed: () async {
                  photos = await MultiCropPicker.selectMedia(context,
                      maxLength: 2,
                      aspectRatio: 1.0,                      
                      previewShowingRatio: 1.0,
                      textColor: Colors.white,
                      backgroundColor: Colors.brown,
                      tagColor: Colors.yellow,
                      loadingWidget: const LoadingCircle(),
                      tagTextColor: Colors.black);
                  setState(() {});
                },
                child: const Text('获取图片')),
            if (photos != null)
              Expanded(child: ListView.builder(
                  itemCount: photos!.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return SizedBox(
                      height: MediaQuery.of(context).size.width,
                      width: MediaQuery.of(context).size.width,
                      child: Image.memory(photos![index]),
                    );
                  }))
          ],
        ),
      ),
    );
  }
}

class LoadingCircle extends StatelessWidget {
  const LoadingCircle(
      {Key? key,
      this.size = 22.0,
      this.backgroudColor = 0x000000,
      this.color = 0xFFFFFDE7})
      : super(key: key);
  final double size;
  final int backgroudColor;
  final int color;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
      width: size,
      height: size,
      child: CircularProgressIndicator(
        strokeWidth: 3,
        backgroundColor: Color(backgroudColor),
        color: Color(color),
      ),
    );
  }
}