こんにちは。アプリ開発をしているとQRコードやバーコードで何かを読み込みたい、という要望はよくありますよね。
FlutterFlowでQRコード読み込み、バーコード読み込み機能はできるのでしょうか？
はい、できます。簡単です。
今日はノーコードのFlutterFlowでのバーコード読み込み機能を試してみたので書いてみたいと思います。
※「読み込み」ではなく「生成」機能はこちら 【ノーコード】FlutterFlowでQRコード/バーコード生成機能を実装してみよう。
FlutterFlowでQRコード・バーコード読み込み機能は簡単
FlutterFlowでQRコード・バーコード読み込み機能を作ることはとても簡単です。アクションで「Scan Barcode / QR Code」というアクションが最初から用意されているのでそれを呼ぶだけです。ありがたいですね！
では実装方法を見ていきましょう。
まずはQRコード・バーコード読み込み画面のUI作成
まずは画面を作っていきましょう。私は以下のようにテキストとボタンだけ置いてあるシンプルな画面を作成しました。
ボタンを押すとQRコード／バーコード読み込みが始まり、読み込んだらその値がテキストに表示されるというイメージですね。
ボタンのアクションの設定
以下のように「Scan Barcode / QR Code」というアクションを選択しましょう。そしてOutputのところに名前をつけておきましょう。この名前を参照して読み込んだ値をテキストに表示します。
読みこんだQRコード/バーコードの内容を表示
最後は、テキストを選択し、以下のように先ほど定義したOutputの名前を選択すれば完成です。とても簡単ですね！
QRコード/バーコード読み込み：動作確認
では動作確認してみましょう。
実機からアプリを起動すると、以下のようにQRコード読み込み機能が起動するので、用意しておいたQRコードを読み込んでみると...
こんな感じで読み込んだQRコードの元の文字列を表示してくれました。
成功です。
YoutubeでFlutterFlowのQRコード/バーコード読み込み機能の説明を見たい方はこちら
FlutterFlowのQRコード/バーコード読み込み機能はこちらのYoutube動画でも解説しているのでぜひ！
QRコード/バーコードの「生成」機能についてはこちら
今回は「読み取り」機能について書いてきましたが、以下の記事でQRコード/バーコードの「生成」機能も書いてますので興味がある方はどうぞ
【ノーコード】FlutterFlowでQRコード/バーコード生成機能を実装してみよう。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。