Flutter で QR コードを生成

はじめに

Flutter で QR コード生成する記事が見つけられなかったため、自分のために残しておきます。
ただ、めちゃくちゃ簡単にできます笑

環境

• macOS Catalina バージョン 10.15.6
• Android Studio 4.0

flutter --version

Flutter 1.20.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2ae34518b8 (10 days ago) • 2020-08-05 19:53:19 -0700
Engine • revision c8e3b94853
Tools • Dart 2.9.0

前提条件

• Flutter のセットアップ済み
• Flutter プロジェクト作成済み

QR コードを生成

今回は以下の自分の Twitter アカウントの URL を QR コードにしていきます

ライブラリを追加

qr_flutter というライブラリを使うので、pubspec.yaml に qr_flutter を追加します。

pubspec.yaml

dependencies:
  ...
  qr_flutter: ^3.1.0
  ...

追加したら以下のコマンドを実行します。

cd {プロジェクトルート}
flutter pub get

QR コードを表示する画面を作成

qr_flutter パッケージに QrImage というクラスがあるので、それを使います。

main.dart

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'QR Code Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const QrCodeLayout(),
    );
  }
}

class QrCodeLayout extends StatelessWidget {
  const QrCodeLayout({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Demo'),
      ),
      body: Center(
        child: QrImage(
          data: 'https://twitter.com/blendthink',
          size: 200,
        ),
      ),
    );
  }
}

アプリで実行

Android のエミュレーターか iOS のシミュレーターを起動して以下のコマンドを実行します。

cd {プロジェクトルート}
flutter run

以下のように無事に QR コードが生成できました
めちゃくちゃ簡単ですね

真ん中に画像を表示したい

おしゃれに表示したり、何のデータが入ってるか分かるようにしたいですよね。
簡単に実装できます！

画像を追加

今回は以下のサイトから画像を使わせていただきました。

Icons8

プロジェクト直下に images というフォルダーを作成して、そこに画像を twitter.png として入れます。

assets の設定

pubspec.yaml に assets の設定を追加します

flutter:
  uses-material-design: true
  ...
  assets:
   - images/
  ...

追加したら以下のコマンドを実行します。

cd {プロジェクトルート}
flutter pub get

レイアウトを修正

あとは QrImage クラスの embeddedImage で追加した画像を設定するだけです

main.dart

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'QR Code Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const QrCodeLayout(),
    );
  }
}

class QrCodeLayout extends StatelessWidget {
  const QrCodeLayout({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Demo'),
      ),
      body: Center(
        child: QrImage(
          data: 'https://twitter.com/blendthink',
          size: 200,
          embeddedImage: AssetImage('images/twitter.png'),
          embeddedImageStyle: QrEmbeddedImageStyle(
            size: Size(50, 50),
          ),
        ),
      ),
    );
  }
}

アプリで実行

Android のエミュレーターか iOS のシミュレーターを起動して以下のコマンドを実行します。

cd {プロジェクトルート}
flutter run

おわりに

こんなに簡単に実装できて、これからは Flutter の時代になるんじゃないかなって感じました。
ぜひみなさんも Flutter やりましょ！