こんにちは!文系プログラマーいおです!
今回はFlutterでQRコードを生成して表示するサンプルです。
サンプル画面
下記のようなQRコード画面を作成していきます。
サンプルコード全文
main.dart
import 'package:flutter/material.dart'; import 'package:qr_flutter/qr_flutter.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'QR Sample'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<myhomepage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<myhomepage> { String qrText = 'https://kirickp.com'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: QrImageView( data: qrText, size: 300, ), ), ); } }
実装手順
①qr_flutterのインストール
②qr_flutterのインポート
③QRコード化するURLを格納した変数を定義
④QrImage()でQRコード生成
①qr_flutterのインストール
pubspec.yamlに「qr_flutter: ^4.1.0」を記述。
パッケージ名とバージョンです。
pubspec.yaml
dependencies: flutter: sdk: flutter qr_flutter: ^4.1.0
次に、flutter pub get コマンドを実行する。
Android Studioの場合は下記画像の「Pub get」を押すだけでOKです。
②qr_flutterのインポート
下記をqr_flutterを使用するファイルに記述。
import 'package:qr_flutter/qr_flutter.dart';
③QRコード化するURLを格納した変数を定義
String qrText = 'https://kirickp.com';
④QrImage()でQRコード生成
QRコードを表示したい場所(今回は中央に表示させたいのでCenter内)に「QrImageView」を記述し、③で定義した変数を「data:」プロパティにセットする。
body: Center( child: QrImageView( data: qrText, size: 300, ), ),
注※ qr_flutterのバージョン「4.0.1」以降はQR出力用のメソッド名が「QrImage」から「QrImageView」に変更になっています。
おわりに
今回はFlutterでQRコードを生成する方法をまとめました。
お役に立てていれば幸いです。
最後までお読みいただきありがとうございました!