$30 off During Our Annual Pro Sale. View Details »

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/

operandoOS

May 31, 2018
Tweet

More Decks by operandoOS

Other Decks in Technology

Transcript

  1. FlutterͰ

    QRίʔυϦʔμʔ

    Λࡶʹ࡞ͬͯΈͨ
    Flutter Meetup Tokyo #2

    View Slide

  2. About Me
    • Dart͕࠷ڧͱݴ͍ଓ͚ͨਓͰ͢ʂ
    • ϓϩήʔϚʔ໨ࢦͯ͠·͢ʂ
    • Discord : operandoOS
    • Steam : operandoOS
    • YouTubeͰήʔϜ഑৴ͯ͠·͢ʂ
    • https://www.youtube.com/user/opp228

    View Slide

  3. Demo

    View Slide

  4. ΞϓϦͷίʔυ
    • Flutter QRCode Scanner APP
    • https://github.com/operando/
    FlutterQRScanner-App

    View Slide

  5. ࡞ۀ࣌ؒ
    4࣌ؒ͘Β͍

    View Slide

  6. ࡞ΔաఔΛͬ͘͟Γ঺հ

    View Slide

  7. ͳͥQRίʔυϦʔμʔΞϓϦΛ࡞Δͷ͔
    • Androidͷඪ४ΧϝϥΞϓϦ͸QRίʔυಡΈࠐΈͰ͖ͳ͍
    • iOS͸Ͱ͖Δ
    • ੈʹ͋ΔQRίʔυϦʔμʔΞϓϦ޿ࠂ͕ग़ͯݏʔ
    • ࣗ෼Ͱ࡞Ε͹͍͍ͷͰ͸ʁ
    • FlutterͰ΍Δ͔ʔ

    View Slide

  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

    View Slide

  9. QRίʔυϦʔμʔͷLibraryΛ୳͢
    • ͜ͷํͷYouTubeνϟϯωϧFlutterಈըͷ

    ݁ߏ͋ͬͯྑͦ͞͏
    • MTechViral
    • https://www.youtube.com/channel/
    UCFTM1FGjZSkoSPDZgtbp7hA

    View Slide

  10. QR Code Scanner AppΛಈ͔ͯ͠ΈΔ
    • git cloneͯ͠ɺIntelliJ IDEAͰ։͘
    • AndroidΞϓϦͰϏϧυ͢Δ

    View Slide

  11. ಈ͍ͨ

    View Slide

  12. QR Code Scanner AppͷίʔυΛ

    ݟͯΈΔ
    • QRίʔυಡΈࠐΈʹ͸LibraryΛ࢖ͬͯΔ
    • barcode_scan
    • https://github.com/apptreesoftware/
    flutter_barcode_reader

    View Slide

  13. QR Code Scanner AppͷίʔυΛ

    ݟͯΈΔ
    • barcode_scan͸QRίʔυಡΈࠐΈʹ

    zxingΛ࢖ͬͯΔ
    • https://github.com/zxing/zxing
    • GoogleͷMobile Visionʹࠩ͠ସ͍͑ͨཉ͕

    ग़͖ͯͨ

    View Slide

  14. Flutter Mobile Vision Package
    Λ୳ͯ͠ΈΔ
    • ͋ͬͨʔʂ
    • flutter_mobile_vision
    • https://github.com/edufolly/
    flutter_mobile_vision
    • iOS͸ະରԠͬΆ͍

    View Slide

  15. flutter_mobile_visionʹࠩ͠ସ͑Δ
    • ؆୯ʹࠩ͠ସ͑ΒΕͨ

    View Slide

  16. Future _scanQR() async {
    List 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,
    );
    }

    View Slide

  17. ͳΜͩɺͰ͖ͪ·ͬͨͥ...

    View Slide

  18. ػೳ௥Ճͯ͠ΈΑ͏
    • ಡΈࠐΜͩQRίʔυͷจࣈྻΛγΣΞ͢Δ
    • ಡΈࠐΈཤྺΛ࡞Δ
    • ࠓճ͸ͬͪ͜ͷ࿩Λ͠·͢

    View Slide

  19. ಡΈࠐΈཤྺΛ࡞Δ
    • ಡΈࠐΈཤྺը໘Λ࡞Δ
    • ಡΈࠐΈཤྺը໘΁ͷભҠΛ࡞Δ
    • ಡΈࠐΜͩ৘ใΛDBʹอଘ͢Δ
    • ಡΈࠐΈཤྺҰཡΛදࣔ͢Δ

    View Slide

  20. ಡΈࠐΈཤྺը໘Λ࡞Δ
    • HistoryStateͷத਎͸ޙ΄Ͳ
    class History extends StatefulWidget {
    @override
    HistoryState createState() {
    return HistoryState();
    }
    }

    View Slide

  21. ಡΈࠐΈཤྺը໘΁ͷભҠΛ࡞Δ
    void main() => runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: HomePage(),
    routes: {
    'history': (_) => History()},
    ));

    View Slide

  22. ಡΈࠐΈཤྺը໘ʹListViewΛදࣔ͢Δ
    • ListViewͷ࢖͍ํΛެࣜυΩϡϝϯτ͔ΒֶͿ
    • ͱΓ͋͑ͣݻఆσʔλΛදࣔͯ͠ΈΔ

    View Slide

  23. class HistoryState extends State {
    @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("χʔτ"));
    }));
    }
    }

    View Slide

  24. ಡΈࠐΜͩ৘ใΛDBʹอଘ͢Δ
    • DB Library୳ͯ͠ΈΔ
    • sqflite
    • https://github.com/tekartik/sqflite

    View Slide

  25. sqfliteͷ࢖͍ํΛֶͿ
    • READMEಡΜͩΓɺexampleಡΜͩΓ͢Δ
    • ͋ͱ͸งғؾͰίϐϖ͖ͯͨ͠ɺॻ͖׵͑Δ
    • example͕ͪΐͬͱΘ͔Γʹ͔ͬͨ͘ͷͰ

    ؤுΔ...

    View Slide

  26. DBʹอଘ͞Εͨ৘ใݟ͍ͨ...
    • AndroidͳΒStetho࢖͑͹ʂʂ
    • flutter_stetho
    • https://github.com/brianegan/flutter_stetho
    • Ͱ΋DBݟΕͳ͔ͬͨ...
    • sqfliteͰDBΛ࡞ͬͯΔσΟϨΫτϦ͕͋Ε͔΋

    View Slide

  27. อଘͨ͠ಡΈࠐΈཤྺΛ
    ListViewʹදࣔ͢Δ
    • DB͔ΒཤྺΛಡΈࠐΜͰɺऔಘͰ͖ͨΒ
    setState͢Δ͚ͩ

    View Slide

  28. class HistoryState extends State {
    List _items = [];
    @override
    void initState() {
    super.initState();
    _initDatabase();
    }
    _initDatabase() async {
    String path = await getDatabaseFilePath("scan_history.db");
    Database db = await openReadOnlyDatabase(path);
    List data = await db.query("scan_hisoty", columns: ["text"]);
    List 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}"));
    }));
    }
    }

    View Slide

  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

    View Slide

  30. ࡞ͬͯΈͯײͨ͜͡ͱ
    • ͱΓ͋͑ͣLibrary୳͕ͪ͠
    • ࣗ෼͕࣮૷͠ͳͯ͘΋͖ͬͱ͋Δײ
    • ࣮ࡍʹେମ͸͋Δ

    View Slide

  31. ࡞ͬͯΈͯײͨ͜͡ͱ
    • ยํͷϓϥοτϑΥʔϜ͚࣮ͩ૷ͯ͠΋

    શવྑͦ͞͏
    • ࡞Γ͍ͨ΋ͷΛ͙͢࡞ΕΔ
    • Α͘஌Βͳ͍͔Βࡉ͔͍͜ͱʹ

    ͩ͜ΘΒͳ͘ͳΔ

    View Slide

  32. ࡞ͬͯΈͯײͨ͜͡ͱ
    • async / awaitࡶʹ࢖͍͕ͪ
    • ཧղͯ͜͠͏ͳʂ
    • TextΛදࣔ͢Δํ๏๨Ε͕ͪ
    • ίϯϙʔωϯτʹจࣈྻࢦఆ͢ΔϓϩύςΟ͕͋Δͱ
    צҧ͍͢Δ
    • WidgetͩΑʂʂ

    View Slide

  33. ࡞ͬͯΈͯײͨ͜͡ͱ
    • ࠷ѱ main.dartʹશ෦ॻ͍ͯ΋ྑͦ͞͏
    • ͋ͱͰ෼͚Ε͹͍͍͠
    • ίϐϖ͗͢͠ΔͱϋϚΓ͕ͪ
    • ίϐϖͨ͠ίʔυ͕༧ظͤ͵ಈ͖Λͯ͠Δͷ͋ΔΑͶ
    • ϓϩάϥϛϯάͷջ͔͠͞Λײͨ͡

    View Slide

  34. ࡞ͬͯΈͯײͨ͜͡ͱ
    • SDKͷ࢖͍ํΘ͔Βͳ͔ͬͨΒ

    υΩϡϝϯτಡΉ͔தͷίʔυಡΉํ͕ૣͦ͏
    • ORM Library͕΄͍͠ͱ͜Ζ...
    • DartͰ࣮૷Ͱ͖Δ͔ͳʁ

    View Slide

  35. ࡞ͬͯΈͯײͨ͜͡ͱ
    • droidkaigi2018-flutterݟͯΈΔͱྑͦ͞͏
    • https://github.com/konifar/
    droidkaigi2018-flutter

    View Slide

  36. Thanks!

    View Slide