技術記事

micomia株式会社のエンジニア 西村です。

今回は、QRコードを読み取り、読み取ったサイトを自動的に開く機能を実装する方法を解説します。

1.実装方法

まずは、QRコード読み取り画面を起動するためのボタンと、確認用に、読み取ったURLを表示するテキストを配置します。

ボタンにActionsを設定します。今回設定したAction Flowはこちらです。

Scan Barcode/QR Codeの、Action Output Variable Nameというところは、読み取った文字列を保存する場所の名前になります。今回はcodeValueとしています。

Launch URLでは、URL Value TypeでFrom Variableを選択します。

From Variableの下に出てくるオレンジ色の欄をクリックすると、画像のような表示が出ます。その中から、Action Outputsの中の、先ほど決めた文字列の保存場所の名前、ここではcodeValueを選択します。

ボタンに設定するActionsはこれで完了です。

次に、テキストに読み取った結果を表示させましょう。

Textのオレンジのマークをクリックすると、画像のような画面が表示されるので、Launch URLの時と同じように、Action Outputsの中の、読み取った文字列の保存場所の名前を選択します。

コードを読み取っていないときに入るデフォルトの文字列、Default Variable Valueを設定します。

これでQRコード読み取り機能の実装は完了です。

2.実際の動き

実際にこのアプリを動かしてみましょう。

Code Scan Buttonを押すと、コードを読み取る画面が起動します。

起動するとこのような画面になります。

この画面でQRコードを読み取ってみましょう。

今回はこの画像を読み込みます。

読み込むとサイトが開き、画面に表示されました。

アプリの画面に戻ってみると、URLが表示されています。

3.注意点

FlutterFlowにあるこのScan Barcode/QR Codeのアクションは、ブラウザでは起動できません。Webアプリを作成する際には使えないので、ご注意ください。

テストする際も、TestFlightやAPK、エミュレーターなどを使ってテストしてください。

4.まとめ

今回はFlutterFlowでQRコード読み取り機能を実装する方法を解説しました。

micomia株式会社では他にもFlutterFlowの解説を行なっていますのでぜひ他の記事もご覧ください。