Flutter数字识别插件flutter_digit_recognizer的使用

Flutter Digit Recognizer

一个基于MNIST数据集的预训练模型，用于识别手写数字的Flutter库。该库为您的Flutter应用程序提供了易于使用的接口，以便集成数字识别功能。

背景

我创建此库是为了提供一种高效且用户友好的方式，将数字识别功能集成到Flutter应用程序中。该模型是在MNIST数据集上训练的，该数据集包含大量手写数字，确保了准确的预测结果。

特性

• 手写数字识别：识别画布上的手写数字。
• 可定制的绘制区域：配置绘制区域的外观和大小。
• 轻量级且易于集成：可以无缝地添加到现有的Flutter项目中。

安装

要使用Flutter Digit Recognizer库，请将其添加到您的pubspec.yaml文件中：

dependencies:
  flutter_digit_recognizer: ^0.0.1

然后运行：

flutter pub get

使用方法

导入库

import 'package:flutter_digit_recognizer/flutter_digit_recognizer.dart';

使用DrawScreen小部件

DrawScreenTheme(
  data: DrawScreenThemeData(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 10,
          offset: Offset(0, 4),
        ),
      ],
      border: Border.all(
        color: Colors.blueAccent,
        width: 4.0,
      ),
    ),
  ),
  child: DrawScreen(
    getPredictNum: (String num) {
      setState(() {
        predictNumber = num;
      });
    },
  ),
)

基本设置

绘制区域配置

DrawScreenThemeData(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 10,
        offset: Offset(0, 4),
      ),
    ],
    border: Border.all(
      color: Colors.greenAccent,
      width: 4.0,
    ),
  ),
)

处理预测

getPredictNum回调提供了识别的数字。您可以使用此回调来更新UI或进一步处理预测结果。

getPredictNum: (String num) {
  debugPrint("Predicted Number: $num");
  setState(() {
    // 更新预测数字
    predictNumber = num;
  });
},

重要提示

我在这个MNIST数据集上训练了这个模型以进行手写数字识别，这意味着为了获得准确的预测结果，您应该在指定的画布大小内清晰地书写每个数字。确保您写的每个数字都是清晰可辨的。模型的预测结果基于MNIST数据集，输入数据的质量可能会影响预测结果。

许可证

Flutter Digit Recognizer 插件 是根据MIT许可证发布的。详情请参阅LICENSE文件。

以下是完整的示例代码：

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

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: RecognizerScreen());
  }
}

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

  [@override](/user/override)
  State<RecognizerScreen> createState() => _RecognizerScreenState();
}

class _RecognizerScreenState extends State<RecognizerScreen> {
  String predictNumber = ""; // 存储预测的数字字符串

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "这个模型是在MNIST数据集上训练的手写数字识别模型。为了获得准确的预测结果，请在提供的画布大小内清晰地书写每个数字。确保你的数字是清晰可辨的。你写的越清楚，预测结果就越好！",
                style: TextStyle(fontSize: 16),
                textAlign: TextAlign.center,
              ),
            ),
            Center(
              child: DrawScreenTheme(
                data: DrawScreenThemeData(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        blurRadius: 10,
                        offset: const Offset(0, 4),
                      ),
                    ],
                    border: Border.all(
                      color: Colors.blueAccent,
                      width: 4.0,
                    ),
                  ),
                ),
                child: DrawScreen(
                  getPredictNum: (String num) {
                    debugPrint("Predicted Number: $num");
                    setState(() {
                      // 将预测的数字追加到现有字符串中
                      predictNumber += num; // 连接数字
                    });
                  },
                ),
              ),
            ),
            Text(
              _formatNumber(predictNumber), // 格式化显示
              style: const TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }

  // 函数用于格式化数字字符串并添加逗号
  String _formatNumber(String number) {
    if (number.isEmpty) return number;
    final buffer = StringBuffer();
    int count = 0;

    for (int i = number.length - 1; i >= 0; i--) {
      buffer.write(number[i]);
      count++;
      // 每三个数字后添加一个逗号，但不在最后
      if (count % 3 == 0 && i != 0) {
        buffer.write(',');
      }
    }

    // 反转缓冲区以获取正确的顺序
    return buffer.toString().split('').reversed.join('');
  }
}