[056] 플러터 (Flutter) 배우기 - QR 코드 생성하기

2023. 4. 21. 14:50모바일어플개발/Flutter

반응형

안녕하세요~ totally 개발자입니다.

 

qr_flutter

 

오늘 살펴볼 부분은 qr_flutter 패키지를 사용하여 QR 코드를 간단하게 생성하는 방법에 대해 살펴보겠습니다. 방법이 매우 간단하기 때문에 바로 실습을 통해서 알아보도록 하겠습니다.

 

Step 1: pubspec.yaml 파일에 qr_flutter:를 추가합니다.

 

 

 

Step 2: qr_flutter를 import 해줍니다.

 

 

 

Step 3: 저는 qr코드 생성 버튼을 눌렀을 때, QR 코드가 나타나게 할려고 구성할 것이기 때문에 bool 변수를 하나 넣어줍니다.

 

 

 

Step 4: 44~51번째 줄의 버튼을 눌렀을 때 47번째 줄처럼 _qrGenerated 변수를 true로 상태 업데이트 해줍니다.

 

 

 

Step 5: 다음처럼 QrImage 위젯을 넣어줍니다. 여기에 data에는 주로 url이 들어가겠지만 이렇게 string 데이터도 넣을 수 있습니다.

 

 

 

Step 6: 테스트해본 모습입니다.

 

 

 

Step 7: 실제 카메라로 QR 코드를 인식해본 모습입니다. 위의 data에 url이 입력된 경우에는 바로 url이 떠서 이동할 수 있도록 나옵니다.

 

[전체 소스 코드]

 

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static final ValueNotifier<ThemeMode> themeNotifier =
ValueNotifier(ThemeMode.light);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: "Flutter App",
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _qrGenerated = false;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter App'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_qrGenerated = !_qrGenerated;
});
},
child: const Icon(Icons.qr_code),
),
body: Center(
child: Column(
children: [
Container(
padding: const EdgeInsets.all(15),
child: const Text("QR 코드 생성", style: TextStyle(fontSize: 20)),
),
Container(
child: _qrGenerated
? QrImage(
data: "TOTALLY 개발자의 QR코드 데이터입니다.",
version: QrVersions.auto,
size: 200,
)
: const SizedBox.shrink(),
),
],
),
),
);
}
}
view raw 056_main.dart hosted with ❤ by GitHub

 

반응형