Flutter文档扫描插件document_scanner_flutter的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter文档扫描插件 document_scanner_flutter 的使用

document_scanner_flutter 是一个用于Flutter的插件,它不仅支持文档扫描功能,还可以生成PDF文件。以下是该插件的详细使用方法和示例代码。

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  document_scanner_flutter: ^0.2.3

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

基本用法

扫描文档并获取图像文件

import 'dart:io';
import 'package:document_scanner_flutter/document_scanner_flutter.dart';

void scanDocument() async {
  try {
    File scannedDoc = await DocumentScannerFlutter.launch();
    // `scannedDoc` 将是从扫描仪获取的图像文件
    print('Scanned Document Path: ${scannedDoc.path}');
  } on PlatformException catch (e) {
    print('Failed to get document path or operation cancelled: $e');
  }
}

指定来源(相册或相机)

void scanDocumentFromSource(ScannerFileSource source) async {
  try {
    File scannedDoc = await DocumentScannerFlutter.launch(source: source);
    // `scannedDoc` 将是从指定来源获取的图像文件
    print('Scanned Document Path: ${scannedDoc.path}');
  } on PlatformException catch (e) {
    print('Failed to get document path or operation cancelled: $e');
  }
}

新功能

PDF生成

可以将扫描的图像生成为PDF文件:

void generatePdfFromScannedImages() async {
  try {
    File pdfFile = await DocumentScannerFlutter.launchForPdf(
      source: ScannerFileSource.CAMERA,
    );
    // `pdfFile` 将是从扫描仪生成的PDF文件
    print('Generated PDF Path: ${pdfFile.path}');
  } on PlatformException catch (e) {
    print('Failed to generate PDF or operation cancelled: $e');
  }
}

Android扫描器标签自定义

可以自定义Android扫描器中的按钮标签:

void customizeAndroidLabels() async {
  var androidLabelsConfigs = {
    ScannerConfigsAndroid.ANDROID_NEXT_BUTTON_TITLE: "Next Step",
    ScannerConfigsAndroid.ANDROID_SAVE_BUTTON_TITLE: "Save It",
    ScannerConfigsAndroid.ANDROID_ROTATE_LEFT_TITLE: "Turn it left",
    ScannerConfigsAndroid.ANDROID_ROTATE_RIGHT_TITLE: "Turn it right",
    ScannerConfigsAndroid.ANDROID_ORIGINAL_TITLE: "Original",
    ScannerConfigsAndroid.ANDROID_BMW_TITLE: "B & W"
  };

  try {
    File pdfFile = await DocumentScannerFlutter.launchForPdf(
      source: ScannerFileSource.CAMERA,
      androidConfigs: androidLabelsConfigs,
    );
    print('Generated PDF Path with customized labels: ${pdfFile.path}');
  } on PlatformException catch (e) {
    print('Failed to generate PDF or operation cancelled: $e');
  }
}

示例 Demo

以下是一个完整的示例应用,展示了如何使用 document_scanner_flutter 插件进行文档和图像扫描,并生成PDF文件。

import 'dart:io';
import 'package:document_scanner_flutter/document_scanner_flutter.dart';
import 'package:document_scanner_flutter/configs/configs.dart';
import 'package:flutter/material.dart';
import 'package:advance_pdf_viewer/advance_pdf_viewer.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PDFDocument? _scannedDocument;
  File? _scannedDocumentFile;
  File? _scannedImage;

  openPdfScanner(BuildContext context) async {
    var doc = await DocumentScannerFlutter.launchForPdf(
      context,
      labelsConfig: {
        ScannerLabelsConfig.ANDROID_NEXT_BUTTON_LABEL: "Next Steps",
        ScannerLabelsConfig.PDF_GALLERY_FILLED_TITLE_SINGLE: "Only 1 Page",
        ScannerLabelsConfig.PDF_GALLERY_FILLED_TITLE_MULTIPLE: "Only {PAGES_COUNT} Page"
      },
    );
    if (doc != null) {
      _scannedDocument = null;
      setState(() {});
      await Future.delayed(Duration(milliseconds: 100));
      _scannedDocumentFile = doc;
      _scannedDocument = await PDFDocument.fromFile(doc);
      setState(() {});
    }
  }

  openImageScanner(BuildContext context) async {
    var image = await DocumentScannerFlutter.launch(context, 
      labelsConfig: {
        ScannerLabelsConfig.ANDROID_NEXT_BUTTON_LABEL: "Next Step",
        ScannerLabelsConfig.ANDROID_OK_LABEL: "OK"
      });
    if (image != null) {
      _scannedImage = image;
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Document Scanner Demo'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            if (_scannedDocument != null || _scannedImage != null) ...[
              if (_scannedImage != null)
                Image.file(_scannedImage!,
                    width: 300, height: 300, fit: BoxFit.contain),
              if (_scannedDocument != null)
                Expanded(
                    child: PDFViewer(
                  document: _scannedDocument!,
                )),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                    _scannedDocumentFile?.path ?? _scannedImage?.path ?? ''),
              ),
            ],
            Center(
              child: Builder(builder: (context) {
                return ElevatedButton(
                    onPressed: () => openPdfScanner(context),
                    child: Text("PDF Scan"));
              }),
            ),
            Center(
              child: Builder(builder: (context) {
                return ElevatedButton(
                    onPressed: () => openImageScanner(context),
                    child: Text("Image Scan"));
              }),
            )
          ],
        ),
      ),
    );
  }
}

以上示例展示了如何使用 document_scanner_flutter 插件进行文档和图像扫描,并生成PDF文件。你可以根据需要自定义扫描器标签和选择扫描源。


更多关于Flutter文档扫描插件document_scanner_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文档扫描插件document_scanner_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 document_scanner_flutter 插件的示例代码。这个插件允许你在Flutter应用中实现文档扫描功能。以下是一个基本的实现示例:

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 document_scanner_flutter 依赖:

dependencies:
  flutter:
    sdk: flutter
  document_scanner_flutter: ^0.1.3  # 请检查最新版本号

2. 导入插件

在你的 Dart 文件中(比如 main.dart),导入插件:

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

3. 创建扫描页面

接下来,创建一个新的页面用于显示文档扫描功能:

class ScanPage extends StatefulWidget {
  @override
  _ScanPageState createState() => _ScanPageState();
}

class _ScanPageState extends State<ScanPage> {
  late DocumentScannerController _controller;
  late List<Uint8List?> _images;

  @override
  void initState() {
    super.initState();
    _controller = DocumentScannerController();
    _images = [];
    _controller.addListener(() {
      if (_controller.scannedImages.isNotEmpty) {
        setState(() {
          _images = _controller.scannedImages;
        });
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Document Scanner'),
      ),
      body: Column(
        children: [
          Expanded(
            child: DocumentScanner(
              controller: _controller,
              onScanCompleted: (context, image) {
                _controller.stopCamera();
                // 在这里你可以处理扫描完成的图像,比如保存到服务器或本地
                print('Scan completed with image: $image');
                Navigator.pop(context); // 返回上一页或进行其他操作
              },
            ),
          ),
          if (_images.isNotEmpty)
            ListView.builder(
              shrinkWrap: true,
              itemCount: _images.length,
              itemBuilder: (context, index) {
                if (_images[index] != null) {
                  return Image.memory(_images[index]!);
                } else {
                  return Container();
                }
              },
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.startCamera();
        },
        tooltip: 'Start Scan',
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}

4. 在主应用中使用扫描页面

最后,在你的主应用页面(比如 MyApp)中添加一个按钮或路由以访问扫描页面:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Document Scanner Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ScanPage()),
                  );
                },
                child: Text('Scan Document'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项

  1. 权限:确保在 AndroidManifest.xmlInfo.plist 中添加了必要的相机和存储权限。
  2. 错误处理:在实际应用中,应添加更多的错误处理和用户反馈。
  3. 插件版本:请检查 document_scanner_flutter 插件的最新版本,并根据需要更新代码中的版本号。

这个示例展示了如何使用 document_scanner_flutter 插件在Flutter应用中实现基本的文档扫描功能。你可以根据需要进一步扩展和定制。

回到顶部