Flutterで QRコードリーダー を雑に作ってみた

Flutterで
QRコードリーダー
を雑に作ってみた

作ったQRコードリーダーアプリのコード
https://github.com/operando/FlutterQRScanner-App

文字おこし
https://github.com/operando/Notes/tree/master/Flutter_Meetup_Tokyo_2

Flutter Meetup Tokyo #2
https://flutter-jp.connpass.com/event/86352/

Transcript

1. FlutterͰ
 QRίʔυϦʔμʔ
 Λࡶʹ࡞ͬͯΈͨ Flutter Meetup Tokyo #2
2. About Me • Dart͕࠷ڧͱݴ͍ଓ͚ͨਓͰ͢ʂ • ϓϩήʔϚʔ໨ࢦͯ͠·͢ʂ • Discord : operandoOS • Steam : operandoOS • YouTubeͰήʔϜ഑৴ͯ͠·͢ʂ • https://www.youtube.com/user/opp228
3. Demo
4. ΞϓϦͷίʔυ • Flutter QRCode Scanner APP • https://github.com/operando/ FlutterQRScanner-App
5. ࡞ۀ࣌ؒ 4࣌ؒ͘Β͍
6. ࡞ΔաఔΛͬ͘͟Γ঺հ
7. ͳͥQRίʔυϦʔμʔΞϓϦΛ࡞Δͷ͔ • Androidͷඪ४ΧϝϥΞϓϦ͸QRίʔυಡΈࠐΈͰ͖ͳ͍ • iOS͸Ͱ͖Δ • ੈʹ͋ΔQRίʔυϦʔμʔΞϓϦ޿ࠂ͕ग़ͯݏʔ • ࣗ෼Ͱ࡞Ε͹͍͍ͷͰ͸ʁ • FlutterͰ΍Δ͔ʔ
8. QRίʔυϦʔμʔͷLibraryΛ୳͢ • QR Code Scanner AppΛ࡞ͬͯΔYouTubeΛݟ͚ͭͨ • Flutter: QR Code Scanner App | Barcode Scan • https://www.youtube.com/watch?v=siuJhQ9BqsU • Flutter QRCode Scanner APP • https://github.com/iampawan/FlutterQRScanner-App
9. QRίʔυϦʔμʔͷLibraryΛ୳͢ • ͜ͷํͷYouTubeνϟϯωϧFlutterಈըͷ
 ݁ߏ͋ͬͯྑͦ͞͏ • MTechViral • https://www.youtube.com/channel/ UCFTM1FGjZSkoSPDZgtbp7hA
10. QR Code Scanner AppΛಈ͔ͯ͠ΈΔ • git cloneͯ͠ɺIntelliJ IDEAͰ։͘ • AndroidΞϓϦͰϏϧυ͢Δ
11. ಈ͍ͨ
12. QR Code Scanner AppͷίʔυΛ
 ݟͯΈΔ • QRίʔυಡΈࠐΈʹ͸LibraryΛ࢖ͬͯΔ • barcode_scan • https://github.com/apptreesoftware/ flutter_barcode_reader
13. QR Code Scanner AppͷίʔυΛ
 ݟͯΈΔ • barcode_scan͸QRίʔυಡΈࠐΈʹ
 zxingΛ࢖ͬͯΔ • https://github.com/zxing/zxing • GoogleͷMobile Visionʹࠩ͠ସ͍͑ͨཉ͕
 ग़͖ͯͨ
14. Flutter Mobile Vision Package Λ୳ͯ͠ΈΔ • ͋ͬͨʔʂ • flutter_mobile_vision • https://github.com/edufolly/ flutter_mobile_vision • iOS͸ະରԠͬΆ͍
15. flutter_mobile_visionʹࠩ͠ସ͑Δ • ؆୯ʹࠩ͠ସ͑ΒΕͨ
16. 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, ); }
17. ͳΜͩɺͰ͖ͪ·ͬͨͥ...
18. ػೳ௥Ճͯ͠ΈΑ͏ • ಡΈࠐΜͩQRίʔυͷจࣈྻΛγΣΞ͢Δ • ಡΈࠐΈཤྺΛ࡞Δ • ࠓճ͸ͬͪ͜ͷ࿩Λ͠·͢
19. ಡΈࠐΈཤྺΛ࡞Δ • ಡΈࠐΈཤྺը໘Λ࡞Δ • ಡΈࠐΈཤྺը໘΁ͷભҠΛ࡞Δ • ಡΈࠐΜͩ৘ใΛDBʹอଘ͢Δ • ಡΈࠐΈཤྺҰཡΛදࣔ͢Δ
20. ಡΈࠐΈཤྺը໘Λ࡞Δ • HistoryStateͷத਎͸ޙ΄Ͳ class History extends StatefulWidget { @override HistoryState createState() { return HistoryState(); } }
21. ಡΈࠐΈཤྺը໘΁ͷભҠΛ࡞Δ void main() => runApp(MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), routes: <String, WidgetBuilder>{ 'history': (_) => History()}, ));
22. ಡΈࠐΈཤྺը໘ʹListViewΛදࣔ͢Δ • ListViewͷ࢖͍ํΛެࣜυΩϡϝϯτ͔ΒֶͿ • ͱΓ͋͑ͣݻఆσʔλΛදࣔͯ͠ΈΔ
23. 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("χʔτ")); })); } }
24. ಡΈࠐΜͩ৘ใΛDBʹอଘ͢Δ • DB Library୳ͯ͠ΈΔ • sqflite • https://github.com/tekartik/sqflite
25. sqfliteͷ࢖͍ํΛֶͿ • READMEಡΜͩΓɺexampleಡΜͩΓ͢Δ • ͋ͱ͸งғؾͰίϐϖ͖ͯͨ͠ɺॻ͖׵͑Δ • example͕ͪΐͬͱΘ͔Γʹ͔ͬͨ͘ͷͰ
 ؤுΔ...
26. DBʹอଘ͞Εͨ৘ใݟ͍ͨ... • AndroidͳΒStetho࢖͑͹ʂʂ • flutter_stetho • https://github.com/brianegan/flutter_stetho • Ͱ΋DBݟΕͳ͔ͬͨ... • sqfliteͰDBΛ࡞ͬͯΔσΟϨΫτϦ͕͋Ε͔΋
27. อଘͨ͠ಡΈࠐΈཤྺΛ ListViewʹදࣔ͢Δ • DB͔ΒཤྺΛಡΈࠐΜͰɺऔಘͰ͖ͨΒ setState͢Δ͚ͩ
28. 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}")); })); } }
29. ΞϓϦͷ࠷ऴతͳDependencies 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
30. ࡞ͬͯΈͯײͨ͜͡ͱ • ͱΓ͋͑ͣLibrary୳͕ͪ͠ • ࣗ෼͕࣮૷͠ͳͯ͘΋͖ͬͱ͋Δײ • ࣮ࡍʹେମ͸͋Δ
31. ࡞ͬͯΈͯײͨ͜͡ͱ • ยํͷϓϥοτϑΥʔϜ͚࣮ͩ૷ͯ͠΋
 શવྑͦ͞͏ • ࡞Γ͍ͨ΋ͷΛ͙͢࡞ΕΔ • Α͘஌Βͳ͍͔Βࡉ͔͍͜ͱʹ
 ͩ͜ΘΒͳ͘ͳΔ
32. ࡞ͬͯΈͯײͨ͜͡ͱ • async / awaitࡶʹ࢖͍͕ͪ • ཧղͯ͜͠͏ͳʂ • TextΛදࣔ͢Δํ๏๨Ε͕ͪ • ίϯϙʔωϯτʹจࣈྻࢦఆ͢ΔϓϩύςΟ͕͋Δͱ צҧ͍͢Δ • WidgetͩΑʂʂ
33. ࡞ͬͯΈͯײͨ͜͡ͱ • ࠷ѱ main.dartʹશ෦ॻ͍ͯ΋ྑͦ͞͏ • ͋ͱͰ෼͚Ε͹͍͍͠ • ίϐϖ͗͢͠ΔͱϋϚΓ͕ͪ • ίϐϖͨ͠ίʔυ͕༧ظͤ͵ಈ͖Λͯ͠Δͷ͋ΔΑͶ • ϓϩάϥϛϯάͷջ͔͠͞Λײͨ͡
34. ࡞ͬͯΈͯײͨ͜͡ͱ • SDKͷ࢖͍ํΘ͔Βͳ͔ͬͨΒ
 υΩϡϝϯτಡΉ͔தͷίʔυಡΉํ͕ૣͦ͏ • ORM Library͕΄͍͠ͱ͜Ζ... • DartͰ࣮૷Ͱ͖Δ͔ͳʁ
35. ࡞ͬͯΈͯײͨ͜͡ͱ • droidkaigi2018-flutterݟͯΈΔͱྑͦ͞͏ • https://github.com/konifar/ droidkaigi2018-flutter
36. Thanks!