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 コードにしていきます :raising_hand:


## ライブラリを追加

[qr_flutter](https://pub.dev/packages/qr_flutter) というライブラリを使うので、`pubspec.yaml` に `qr_flutter` を追加します。

```yaml:pubspec.yaml
dependencies:
  ...
  qr_flutter: ^3.1.0
  ...
```

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

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

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

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

```dart: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 コードが生成できました :tada:
めちゃくちゃ簡単ですね :laughing:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/47ef339b-5cf7-04e0-2eda-32036cd12106.png" width="320">

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

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

## 画像を追加

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

[Icons8](https://icons8.com/icons/set/twitter)

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

## `assets` の設定

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

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

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

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

## レイアウトを修正

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

```dart: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
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/4a11b370-78af-a9fe-48b4-1eaa54a3273b.png" width="320">

# おわりに

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