개요
Flutter를 이용하여 간단한 QR Code 를 스캔하는 앱을 만들어 보겠다. dart와 flutter의 라이브러리를 다운받을 수 있는 pub.dev에서 원하는 라이브러리를 검색한다. 그리고 flutter 프로젝트의 pubspec.yaml에 해당 라이브러리를 정의하여 자동으로 의존성이 추가 되도록 설정한다. pubspec.yaml 은 build.gradle처럼 프로젝트를 정의하고 패키지 의존성을 관리하는 파일이다. yaml은 간단하게 말하면 xml과 json의 단점을 보완하여 만들어진 데이터 직렬화 언어이다.
적절한 오픈소스 라이브러리 찾기
pub.dev 사이트에 접속하여 검색 창에 qr code 를 입력한다. qr_code_scanner의 경우 안드로이드는 zxing를 iOS에서는 MTBBarcode scanner를 사용하여 두 가지 플랫폼에서 모두 동작한다. 해당 라이브러리는 더 이상 기능 개선은 이루어지지 않고 버그픽스 및 아주 Minor한 업데이트만 이루어 질 것이라고 설명하고 있다.
설치는 pubspec.yaml에 dependencies: 항목을 찾아 qr_code_scanner: ^1.0.0 라인을 한 줄 추가해 주기만 하면 된다. 추가한 뒤 에디터 상단에 Pub get 버튼을 클릭하여 Repository로 부터 파일을 다운로드 받는다.
| dependencies: flutter: sdk: flutter qr_code_scanner: ^1.0.0 |
소스코드 작성
qr_code_scanner에서 제공한 샘플소스를 사용하여 Flutter프로젝트에 main.dart에 다음과 같이 소스코드를 작성한다.
import 'dart:developer';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
void main() => runApp(const MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Demo Home Page')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const QRViewExample(),
));
},
child: const Text('qrView'),
),
),
);
}
}
class QRViewExample extends StatefulWidget {
const QRViewExample({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _QRViewExampleState();
}
class _QRViewExampleState extends State<QRViewExample> {
Barcode? result;
QRViewController? controller;
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
// In order to get hot reload to work we need to pause the camera if the platform
// is android, or resume the camera if the platform is iOS.
@override
void reassemble() {
super.reassemble();
if (Platform.isAndroid) {
controller!.pauseCamera();
}
controller!.resumeCamera();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(flex: 4, child: _buildQrView(context)),
Expanded(
flex: 1,
child: FittedBox(
fit: BoxFit.contain,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
if (result != null)
Text(
'Barcode Type: ${describeEnum(result!.format)} Data: ${result!.code}')
else
const Text('Scan a code'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await controller?.toggleFlash();
setState(() {});
},
child: FutureBuilder(
future: controller?.getFlashStatus(),
builder: (context, snapshot) {
return Text('Flash: ${snapshot.data}');
},
)),
),
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await controller?.flipCamera();
setState(() {});
},
child: FutureBuilder(
future: controller?.getCameraInfo(),
builder: (context, snapshot) {
if (snapshot.data != null) {
return Text(
'Camera facing ${describeEnum(snapshot.data!)}');
} else {
return const Text('loading');
}
},
)),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await controller?.pauseCamera();
},
child: const Text('pause',
style: TextStyle(fontSize: 20)),
),
),
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await controller?.resumeCamera();
},
child: const Text('resume',
style: TextStyle(fontSize: 20)),
),
)
],
),
],
),
),
)
],
),
);
}
Widget _buildQrView(BuildContext context) {
// For this example we check how width or tall the device is and change the scanArea and overlay accordingly.
var scanArea = (MediaQuery.of(context).size.width < 400 ||
MediaQuery.of(context).size.height < 400)
? 150.0
: 300.0;
// To ensure the Scanner view is properly sizes after rotation
// we need to listen for Flutter SizeChanged notification and update controller
return QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.red,
borderRadius: 10,
borderLength: 30,
borderWidth: 10,
cutOutSize: scanArea),
onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),
);
}
void _onQRViewCreated(QRViewController controller) {
setState(() {
this.controller = controller;
});
controller.scannedDataStream.listen((scanData) {
setState(() {
result = scanData;
});
});
}
void _onPermissionSet(BuildContext context, QRViewController ctrl, bool p) {
log('${DateTime.now().toIso8601String()}_onPermissionSet $p');
if (!p) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('no Permission')),
);
}
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
}Run을 클릭하여 실행해본다. 혹시 라이브러리가 지원하지 않는 sdk 설정으로 빌드가 실패할 수 있다. minSdkVersion이 20 이상부터 지원하는데 Flutter 의 설정에는 더 낮은버전으로 되어 있어서 그렇다. android/app/build.gradle에서 minSdkVersion을 20으로 변경 후 정상적으로 빌드 될 수 있었다.
마치며
지금 까지 아주 간단하게 Flutter를 사용한 QR Code 스캔앱을 만들어보았다. zxing를 이용하면 안드로이드에서 간단하게 QR Code 스캔하는 부분을 작성 할 수 있지만 간단한 앱을 만들기 위해서 Flutter 보다 코딩이 더 많이 필요한게 사실이다. 놀라운건 이 앱이 iOS에서도 동작한다는 것 이다. Flutter에대해 앞으로 하나하나 더 알아가 보도록 하겠다.