FlutterでQRコードリーダー的なアプリを雑に作ってみた
Androidの標準カメラアプリはQRコード読み込みできない
世にあるQRコードリーダーアプリ広告が出て嫌ー
自分で作ればいいのでは?
Flutterでやるかー
QR Code Scanner Appを作ってるYouTubeを見つけた
Flutter: QR Code Scanner App | Barcode Scan
Flutter QRCode Scanner APP
この方のYouTubeチャンネルFlutter動画結構あって良さそう
MTechViral
QR Code Scanner Appを動かしてみる
git cloneして、IntelliJ IDEAで開く
Androidアプリでビルドする
QR Code Scanner Appのコードを見てみる
QR Code Scanner Appのコードを見てみる
Flutter Mobile Vision Packageを探してみる
flutter_mobile_visionに差し替える
Future _scanQR () async {
List <Barcode > barcodes = [];
try {
barcodes = await FlutterMobileVision .scan (
flash: false ,
autoFocus: true ,
formats: Barcode .ALL_FORMATS ,
multiple: false ,
showText: true ,
camera: FlutterMobileVision .CAMERA_BACK ,
fps: 30.0 ,
);
setState (() {
result = barcodes[0 ].displayValue;
});
} on Exception {
barcodes.add (new Barcode ('Failed to get barcode.' ));
}
}
@override
Widget build (BuildContext context) {
...
body: Center (
...
floatingActionButton: FloatingActionButton .extended (
icon: Icon (Icons .camera_alt),
label: Text ("Scan" ),
onPressed: _scanQR,
),
floatingActionButtonLocation: FloatingActionButtonLocation .centerFloat,
);
}
読み込んだQRコードの文字列をシェアする
読み込み履歴を作る
読み込み履歴画面を作る
読み込み履歴画面への遷移を作る
読み込んだ情報をDBに保存する
読み込み履歴一覧を表示する
class History extends StatefulWidget {
@override
HistoryState createState () {
return HistoryState ();
}
}
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
routes: <String, WidgetBuilder>{'history': (_) => History()},
));
ListViewの使い方を公式ドキュメントから学ぶ
とりあえず固定データを表示してみる
class HistoryState extends State <History > {
@override
Widget build (BuildContext context) {
return Scaffold (
appBar: AppBar (
title: Text ("Scanner History" ),
),
body: new ListView .builder (
itemCount: 1 ,
itemBuilder: (context, index) {
return ListTile (title: Text ("ニート" ));
}));
}
}
README読んだり、example読んだりする
あとは雰囲気でコピペしてきた、書き換える
exampleがちょっとわかりにくかったので頑張る...
AndroidならStetho使えば!!
flutter_stetho
でもDB見れなかった...
sqfliteでDBを作ってるディレクトリがちょっとあれかも
DBから履歴を読み込んで、取得できたらsetStateするだけ
class HistoryState extends State <History > {
List <ScanItem > _items = [];
@override
void initState () {
super .initState ();
_initDatabase ();
}
_initDatabase () async {
String path = await getDatabaseFilePath ("scan_history.db" );
Database db = await openReadOnlyDatabase (path);
List <Map > data = await db.query ("scan_hisoty" , columns: ["text" ]);
List <ScanItem > items = [];
data.forEach ((e) => items.add (ScanItem .fromMap (e)));
setState (() {
_items = items;
});
await db.close ();
}
@override
Widget build (BuildContext context) {
return Scaffold (
...
body: new ListView .builder (
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile (title: Text ("${_items [index ].text }" ));
}));
}
}
dependencies :
flutter :
sdk : flutter
cupertino_icons : ^0.1.2
flutter_mobile_vision : ^0.1.0
share : " ^0.5.0"
sqflite : " ^0.8.9"
path_provider : " ^0.4.0"
dev_dependencies :
flutter_stetho : 0.1.1
flutter_test :
sdk : flutter
とりあえずLibrary探しがち
自分が実装しなくてもきっとある感
実際に大体はある
片方のプラットフォームだけ実装しても全然良さそう
作りたいものをすぐ作れる
async / await雑に使いがち
Text表示する方法忘れがち
コンポーネントに文字列指定するプロパティがあると勘違いする
基本Widgetだよ!
最悪main.dartに全部書いても良さそう
コピペしすぎるとハマりがち
コピペしたコードが予期せぬ動きをしてるのあるよね
プログラミングの懐かしさを感じた
SDKの使い方わからなかったらドキュメント読むか中のコード読む方が早そう
ORM Libraryがほしいところ...