【ノーコード】FlutterFlowでQRコード/バーコード生成機能を実装してみよう。ノーコード開発会社の選び方｜開発実績127件の技術者が6つの必須確認項目を解説

この時点では「FlutterFlowではQRコード／バーコードの読み込みはできるけど生成をするエレメントしかできない。もしバーコード／QRコードの生成をしたいなら自前でカスタムアクションとかガリガリ書くしかない」と思っていたので読み込み機能に関してのみ書いていました。

しかし、いつの間にか、FlutterFlowのエレメントに「barcode」というエレメントが追加されており、今はこれでQRコード／バーコードの読み込みができるようですね！
僕もわからなかったのでFlutterFlow有識者たちに教えてもらいました✨

本当にFlutterFlowの機能追加のスピードが早過ぎます。我々も追いつかないくらいなのは嬉し過ぎますね。

ではbarcodeエレメントを使ったQRコード／バーコードの読み込みを試してみたので紹介します。

FlutterFlowのエレメントからBarcodeエレメントを検索

以下のようにBarcodeで検索するとすぐ出てきます。

↓以下のような感じでバーコード用とQRコードように、barcodeエレメントを二つ配置してみました。

Barcode Valueのところに変数を入れられるので、入力した値をバーコード・QRコード化できます。

Barcode Dimensionsを1Dから2Dにすることで、バーコードとQRコードを切り替えられます。

バーコードにもQRコードにも簡単に対応できて素晴らしいですね。

動かしてみると、以下のようにテキストフィールドに入力したコードがバーコード化・QRコード化できました。

実際にスマホから読み取ってみましたが、問題なく値が取れることが確認できました。

FlutterFlowでのバーコード/QRコードの生成機能についてこちらの動画でも解説しているので興味のある方はどうぞ

今回は「生成」機能でしたが「読み込み」機能については別ブログで書いてるのでこちらもどうぞ

bubble、Adalo、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。