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
を追加します。
dependencies:
...
qr_flutter: ^3.1.0
...
追加したら以下のコマンドを実行します。
cd {プロジェクトルート}
flutter pub get
QR コードを表示する画面を作成
qr_flutter
パッケージに QrImage
というクラスがあるので、それを使います。
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 コードが生成できました
めちゃくちゃ簡単ですね
真ん中に画像を表示したい
おしゃれに表示したり、何のデータが入ってるか分かるようにしたいですよね。
簡単に実装できます!
画像を追加
今回は以下のサイトから画像を使わせていただきました。
プロジェクト直下に images
というフォルダーを作成して、そこに画像を twitter.png
として入れます。
assets
の設定
pubspec.yaml
に assets
の設定を追加します
flutter:
uses-material-design: true
...
assets:
- images/
...
追加したら以下のコマンドを実行します。
cd {プロジェクトルート}
flutter pub get
レイアウトを修正
あとは QrImage
クラスの embeddedImage
で追加した画像を設定するだけです
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 やりましょ!
Author And Source
この問題について(Flutter で QR コードを生成), 我々は、より多くの情報をここで見つけました https://qiita.com/blendthink/items/8057e27674058a0300b4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .