TECHaas
Flutter で QRコードを扱う
Android と iOS アプリを同時に開発できる Flutter です.
今回は、QRコード関連の話題です.
まずは、普通に QRコードの表示から。例によって、ソースコードは、以下に置いてあります。
QRコードの表示はパッケージを使うと簡単にできます。 Pub.devを探すといくつかパッケージがあります。
今回は比較的ポピュラーっぽい以下のパッケージを使います。
Pub.dev - qr_flutter - feature/basic_displayブランチ
pubspec.yaml に以下を追加して、pub getします。
dependencies:
flutter:
...
qr_flutter: ^4.0.0
main.dart側は、特に何も特別なことはしていません。
Widget build(BuildContext context) {
return Container(
color: Colors.grey,
child: Center(child: QRCodeDisplay(message: 'https://www.techaas.net/')));
}
背景を grey(灰色) にセットして、その中央になるように、QRCodeDisplayを配置します。
表示される画面は、こんな感じとなります。
QRコードを表示するQRCodeDisplayを少し詳しく見てみます。
今回QRコードの中に表示する内容は途中で変更しないので、StatelessWidgetとします。
実際のアプリでも、途中で変更されるようなものでないなら、Statelessで大丈夫です。
class QRCodeDisplay extends StatelessWidget {
final String message;
QRCodeDisplay({Key? key, required this.message}) : super(key: key);
@override
Widget build(BuildContext context) {
背景を、white (白) にセットしたContainerにColumnを配置します。
Columnでは、childrenに設定した子ウィジェットが縦に並びます。
また、このウィジェット全体の幅は、画面の 70% としています。
return Container(
width: MediaQuery.of(context).size.width * 0.7,
color: Colors.white,
child: Column(mainAxisSize: MainAxisSize.min, children: [
子ウィジェットの最初が、QRコードになります。 と言ってもパッケージが全部作ってくれるので、引数に表示文字列を与えるだけです。
Container(
padding: EdgeInsets.all(10),
child: QrImage(
data: message,
version: QrVersions.auto,
),
),
あと、少し余白を空けて、その下に表示している文字列を書いています。
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(5),
child: Text(
message,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
color: Colors.grey,
),
),
)
単純に QRコードを表示するだけなら、すごく簡単です。
あまり面白くないので、もう少し複雑な例を。