flutterでバーコードリーダーを作ってみた -iOSとandroid両方で導入済み-

バーコードリーダーをflutterで作る

バーコードをカメラで読み取って番号を返すアプリを作りました。packageのReadMeの説明が分かりにくかったのでリサーチしました。修正後、うまく起動したのでまとめます。エミュレーターでは起動していますが、そのうち実機でテストします。

---

使用したPackage

barcode_scan 1.0.0

完成したアプリ

カメラ画面

準備

1.dependencies:
barcode_scan: ^1.0.0
2.$ flutter pub get
3.import 'package:barcode_scan/barcode_scan.dart';

Android側の準備

AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<application...

AndroidManifest.xml

<application>
    <activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity"/>
</application>

iOS側の準備

Info.plist

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>

Kotlin Versionを宣言？？

app階層のbuild.gradleを編集

build.gradle

apply...
apply plugin: 'kotlin-android'

..
dependencies {
    ...
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
}

android階層のbuild.gradleを編集

build.gradle

buildscript {
    ext.kotlin_version = '1.3.30'

dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'//<-変更する
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
...

gradle.properties

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true

コードを書き始める(コピペで動きます！！)

main.dart

import 'package:barcode_fighter/pages/home_page.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Barcode Reader',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

home_page.dart

import 'dart:io';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String barcode = '';


  @override
  void initState() {
    super.initState();
  }


  Future barcodeScanning() async {
    try {
      String barcode = await BarcodeScanner.scan();
      setState(() => this.barcode = barcode);
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          this.barcode = 'No camera permission!';
        });
      } else {
        setState(() => this.barcode = 'Unknown error: $e');
      }
    } on FormatException {
      setState(() => this.barcode = 'Nothing captured.');
    } catch (e) {
      setState(() => this.barcode = 'Unknown error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Reader'),
        centerTitle: true,
      ),
      body: _buildBody(),
    );
  }

  Container _buildBody() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                  child: Text('Scan Barcode'),
                  onPressed: () {
                    barcodeScanning();
                  }),
              Padding(
                padding: EdgeInsets.all(20.0),
              ),
              Text('Scan Result : $barcode'),
            ],
          ),
        ],
      ),
    );
  }
}

補足　11月17日２０１９年

iOS側のbuild

筆者がMacを購入しましたので、Xcodeでの開発を開始しました！

詰まったところ　-iOS build-

初めてバーコードリーダーを起動した際にこちらのエラーに遭遇し、解決するのに2日ほどかかりました。

解決策　　-iOS build-

画像の通りbuild active architecture only をyesに変更することでbuildが成功しました。

まとめ

これですべて正常に動くと思います。私のエミュレーター側では正常に作動しました。iOSでのテストは行っていません。
flutterでバーコードリーダーのパッケージを導入しました。後日実機でのバーコードリーダーの起動テストを行います。

---

参照元

https://github.com/apptreesoftware/flutter_barcode_reader/issues/71#issuecomment-468291746
https://stackoverflow.com/questions/21631313/xcode-project-vs-xcode-workspace-differences

Flutter関連記事

Flutter 入門　-textFieldを開いたときにkeyboardを表示しない-

Flutterでtodo Listを作ってみた　－初心者必見－