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

 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/

E77b6a5f919f7366d94f21eee9a014f5?s=128

operandoOS

May 31, 2018
Tweet

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!