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

안녕하세요~ 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