FlutterͰ
 QRίʔυϦʔμʔ
 Λࡶʹ࡞ͬͯΈͨ Flutter Meetup Tokyo #2

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

Demo

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

࡞ۀ࣌ؒ 4࣌ؒ͘Β͍

࡞ΔաఔΛͬ͘͟Γ঺հ

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

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

QRίʔυϦʔμʔͷLibraryΛ୳͢ • ͜ͷํͷYouTubeνϟϯωϧFlutterಈըͷ
 ݁ߏ͋ͬͯྑͦ͞͏ • MTechViral • https://www.youtube.com/channel/ UCFTM1FGjZSkoSPDZgtbp7hA

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

ಈ͍ͨ

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

QR Code Scanner AppͷίʔυΛ
 ݟͯΈΔ • barcode_scan͸QRίʔυಡΈࠐΈʹ
 zxingΛ࢖ͬͯΔ • https://github.com/zxing/zxing • GoogleͷMobile Visionʹࠩ͠ସ͍͑ͨཉ͕
 ग़͖ͯͨ

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

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

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, ); }

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

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

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

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

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

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

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("χʔτ")); })); } }

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

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

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

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

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}")); })); } }

ΞϓϦͷ࠷ऴతͳ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

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

࡞ͬͯΈͯײͨ͜͡ͱ • ยํͷϓϥοτϑΥʔϜ͚࣮ͩ૷ͯ͠΋
 શવྑͦ͞͏ • ࡞Γ͍ͨ΋ͷΛ͙͢࡞ΕΔ • Α͘஌Βͳ͍͔Βࡉ͔͍͜ͱʹ
 ͩ͜ΘΒͳ͘ͳΔ

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

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

࡞ͬͯΈͯײͨ͜͡ͱ • SDKͷ࢖͍ํΘ͔Βͳ͔ͬͨΒ
 υΩϡϝϯτಡΉ͔தͷίʔυಡΉํ͕ૣͦ͏ • ORM Library͕΄͍͠ͱ͜Ζ... • DartͰ࣮૷Ͱ͖Δ͔ͳʁ

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

Thanks!