Flutter文档扫描与图片选择插件scanbot_image_picker的使用

Flutter 文档扫描与图片选择插件 scanbot_image_picker 的使用

安装

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  scanbot_image_picker: ^1.0.0

然后运行 flutter pub get 来安装插件。

使用

首先需要导入插件模块：

import 'package:scanbot_image_picker/scanbot_image_picker_flutter.dart';

单个图像选择

要从相册中选择单个图像，可以使用 pickImageAsync 方法：

Future<ImagePickerResponse> response = await ScanbotImagePickerFlutter.pickImageAsync();
print(response.uri.path);

多个图像选择

要从相册中选择多个图像，可以使用 pickImagesAsync 方法：

Future<ImagePickerResponse> response = await ScanbotImagePickerFlutter.pickImagesAsync();

for (var uri in response.uris) {
  print(uri.path);
}

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 scanbot_image_picker 插件来选择单个或多个图像。

import 'dart:io';

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:scanbot_image_picker/scanbot_image_picker_flutter.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

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

class _MyAppState extends State<MyApp> {
  bool resetView = true;
  List<String> _pickedImages = List.empty(growable: true);

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

  /// 平台消息是异步的，因此我们初始化在一个异步方法中。
  Future<String> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await ScanbotImagePickerFlutter.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return platformVersion;
    return platformVersion;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Image Picker'),
          actions: [
            IconButton(
                onPressed: () {
                  resetAll();
                },
                icon: const Icon(Icons.refresh, size: 25))
          ],
        ),
        body: getWidget(),
      ),
    );
  }

  /// 根据视图状态获取小部件
  Widget getWidget() {
    Widget widget;
    if (resetView) {
      widget = getOptionsWidget();
    } else {
      // 获取图像列表小部件
      widget = getImageListWidget();
    }
    return widget;
  }

  /// 获取初始小部件，显示选项以打开单个/多个图像的图像选择器。
  Widget getOptionsWidget() {
    return Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      TextButton(
        child: const Text("Pick Image"),
        style: ButtonStyle(
          foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
        ),
        onPressed: () {
          pickImageFromPhotoGallery();
        },
      ),
      TextButton(
        child: const Text("Pick Images"),
        style: ButtonStyle(
          foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
        ),
        onPressed: () {
          pickImagesFromPhotoGallery();
        },
      )
    ]));
  }

  /// 显示所选图像列表的小部件。
  Widget getImageListWidget() {
    return GridView.builder(
        padding: const EdgeInsets.all(10),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, crossAxisSpacing: 10, mainAxisSpacing: 10),
        itemCount: _pickedImages.length,
        itemBuilder: (context, index) {
          return Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7),
                  image: DecorationImage(
                      image: FileImage(File(_pickedImages[index])), scale: 0.5,
                      fit: BoxFit.cover)
              )
          );
        }
    );
  }

  /// 将视图重置为初始状态，清除列表并允许用户选择更多图像。
  void resetAll() {
    setState(() {
      resetView = true;
      _pickedImages.clear();
    });
  }

  /// 从照片库中选择多个图像，并获取所选图像 URI 的输出。
  Future pickImagesFromPhotoGallery() async {
    var response = await ScanbotImagePickerFlutter.pickImagesAsync();
    // 显示图像
    setState(() {
      resetView = false;
      _pickedImages = response.getNonEmptyUris();
      if (_pickedImages.isEmpty) {
        resetAll();
      }
    });

    if (response.message?.isNotEmpty == true) {
      // 显示错误消息
      showAlert(response.message ?? "");
    }
  }

  /// 从照片库中选择单个图像，并获取所选图像 URI 的输出。
  Future pickImageFromPhotoGallery() async {
    var response = await ScanbotImagePickerFlutter.pickImageAsync();
    // 显示图像
    setState(() {
      resetView = false;
      if (response.uri?.isNotEmpty == true) {
        _pickedImages.add(response.uri ?? "");
      } else {
        resetAll();
      }
    });

    if (response.message?.isNotEmpty == true) {
      // 显示错误消息
      showAlert(response.message ?? "");
    }
  }

  /// 显示警告消息。
  void showAlert(String message) {
    var alertBuilder = AlertDialog(
      title: const Text("Alert"),
      content: Text(message),
      actions: [
        TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text("Ok"))
      ],
    );

    showDialog(
        context: context, builder: (BuildContext context) => alertBuilder);
  }
}