큐알코드 리더 앱 개발은 뭘로하면 좋은가요?
flutter 로 앱(어플) 만들기
개발 순서
1) New Flutter Project 생성
생성시 중간에 나오는 옵션 Platform channel language
Include Kotlin support for Android Code 옵션 체크
Include Swift support for iOS code 옵션 체크
2) /pubspec.yaml (barcode_scan plugin 사용, http://pub.dev, 사용법 git 정보 확인)
3) /android/app/src/main/AndroidManifest.xml 수정
4) /ios/Runner/Info.plist 수정
5) /android/build.gradle 수정
6) /lib/main.dart 소스 수정
7) 핸드폰 연결 후 테스트
(개발자 옵션 활성화 시키신 후 android USB 디버깅 모드가 켜져 있어야 합니다)
1) android studio 실행 시키신 후
메뉴 File/New/New Flutter Project 클릭해서 실행 합니다.
Flutter Application 선택하셔서 Next 로 진행하시면 중간에 옵션 선택 메뉴가 나옵니다.
아래 그림처럼 Kotlin, Swift 옵션 선택 후 진행합니다.
Include Kotlin support for Android code, Include Swift support for iOS code 선택
*Kotlin 은 google 에서 Android 개발 언어로 java 에서 kotlin 으로 밀고 있는 개발 언어 입니다.
*Swift 또한 apple 에서 ios 개발 언어로 object c 에서 swift 로 변경되고 있는 개발 언입니다.
**Kotlin 옵션은 저희가 이용한인 barcode_scan plugin 이 kotlin 으로 개발되어 있어서 입니다.
***Kotlin 으로 되어진 plugin 이 많고 나중에 가게 되면 native 코드를 건드려야 하는
경우가 많이 생기기 때문에 Kotlin, Swift, Java 등은 조금씩 공부해 놓으시고
프로젝트 생성시 옵션을 kotlin, swift 선택하시면 좋을 것 같습니다.
2) pub.dev 사이트에서 barcode_scan 검색 후 간단한 플러그인 사용법 등을 확인 합니다.
3) 관련 파일 수정
3-1) /pubspec.yaml : barcode_scan: ^1.0.0 추가
3-2) /android/app/src/main/AndroidManifest.xml
다음의 권한 추가
<uses-permission android:name="android.permission.CAMERA" />
3-3) /ios/Runner/Info.plist
다음의 권한 추가
<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>
3-4) /android/build.gradle 수정
ext.kotlin_version = '1.3.20'
classpath 'com.android.tools.build:gradle:3.3.1'
buildscript {
ext.kotlin_version = '1.3.20'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.3.1'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
kotlin_version 및 classpath 의 gradle 버전을 수정하셔야 합니다. 맞지 않으면 빌드가 제대로 되지 않습니다.
4) /lib/main.dart 수정
import 'dart:async';
import 'package:barcodescan/barcodescan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => new MyAppState();
}
class _MyAppState extends State<MyApp> {
String barcode = "";
@override
initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Barcode Scanner Example'),
),
body: new Center(
child: new Column(
children: <Widget>[
new Container(
child: new MaterialButton(
onPressed: scan, child: new Text("Scan")),
padding: const EdgeInsets.all(8.0),
),
new Text(barcode),
],
),
)),
);
}
Future scan() async {
try {
String barcode = await BarcodeScanner.scan();
setState(() => this.barcode = barcode);
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.CameraAccessDenied) {
setState(() {
this.barcode = 'The user did not grant the camera permission!';
});
} else {
setState(() => this.barcode = 'Unknown error: $e');
}
} on FormatException{
setState(() => this.barcode = 'null (User returned using the "back"-button before scanning anything. Result)');
} catch (e) {
setState(() => this.barcode = 'Unknown error: $e');
}
}
}
5) 핸드폰 연결 후 실행 : 상단의 에뮬레이터를 사용하시는 핸드폰으로 변경해 주세요.
큐알코드나 바코드를 찍으면 저장되어 있던 정보가 텍스트로 나타나게 됩니다.
