在Flutter中构建QR码小部件

在我最新的(客户)项目中,我需要一种将QR码输入Flutter应用程序的方法。 原来,使用Google Chart API超级简单。 不幸的是,该API现在已被弃用,因此最好避免使用它。 Google,如果您正在阅读,它可能是新Charts API的不错的补充。

因此,有了Google API选项,现在是时候寻找其他解决方案了。 输入由世界著名会议主持人和Dart开发人员Kevin Moore编写的qr.dart。 qr.dart使整个世代都变得束手无策,因此我们只需要关注“将图像显示在屏幕上”位。 但是首先,让我们谈谈我们如何定义所有这些。 如果您不在乎或仅想查看代码,请跳过下一部分。

qr.dart(和QR码)的工作方式是为它提供QR码版本纠错级别 。 版本越高,可以存储的数据越多。 纠错值确定多少QR码在不可用之前会丢失/损坏(最多30%)。 但是,更高的纠错值会增加冗余所需的数据,从而减少允许的总字符数,因此请记住这一点。 无论如何,这就是我们的QR码的最低要求。

让我们讨论一下我们如何定义Widget,以使其对所有人都有用,而不仅仅是深入到代码中,而不仅仅是跳入代码。 我觉得大多数此类教程都不会打扰,所以我想让我们尝试一下。 无论如何,让我们转到列表形式:

  1. 纠错可能不是很重要(在这种情况下),因为我们只打算绘制到屏幕上,不太可能丢失30%的数据,因此Low是一个很好的默认值。 开发人员可以随时更改它们。
  2. 大多数人可能只需要少量信息,因此我们应该设置一个默认值,以便不是每个人都必须去了解QR码标准版本26的数据限制。 因此,让我们选择版本4作为默认值,它在低错误校正时为我们提供了114个字母数字字符。
  3. 我们希望能够显式或隐式地确定QR码图像的大小; 平方应与此成正比。 您可能应该选择最适合QR码阅读器有效阅读的尺寸,但通常,大多数扫描仪都还不错。
  4. 看到我们在进行自定义绘画时,我们可能可以做一个画家和一个Widget,以获得最大的灵活性。
  5. 我们可能想要自定义颜色和内容。

我们可以继续,但是我认为这是一个好的开始,所以让我们来编写一些代码。

让我们从画家开始。 这是完整的源代码:

所有这些都将很快在发布中,因此您无需出于自己的目的而对其进行复制,但是如果您愿意,则可以使用它,因为它是开源的。 希望,除了为您的应用程序获得漂亮的QR代码小部件之外,这还使您对在Flutter中构建小部件有多么快速和容易有一些了解。

用Flutter编写小部件非常容易,而且非常快捷。 Flutter正在迅速发展,它需要高质量的 Widget,因此花时间进行规划非常重要。 但是,我的建议是,无论如何都要分享您拥有的东西,以便人们可以在此基础上发展或帮助您。

成品可在Github和pub上获得。

卢克夫

qr.flutter –在Flutter中创建QR码

github.com

就是这样。 如果您有特定问题,请随时与Flutter Gitter联络或在此处发表评论,我们会尽快与您联系!