39
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-09-01

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


##使用したPackage
barcode_scan 1.0.0

#完成したアプリ

Screenshot_1567316191.png

##カメラ画面
Screenshot_1567315529.png

#準備
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日2019年
##iOS側のbuild
筆者がMacを購入しましたので、Xcodeでの開発を開始しました!
###詰まったところ -iOS build-
初めてバーコードリーダーを起動した際にこちらのエラーに遭遇し、解決するのに2日ほどかかりました。
Screen Shot 2019-11-17 at 3.15.32 PM.png

###解決策  -iOS build-
Screen Shot 2019-11-17 at 3.06.31 PM.png
画像の通り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を作ってみた -初心者必見-

39
36
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?