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
   

   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