# QR코드

## QR 코드 생성&#x20;

Flutter 앱에서 QR 코드를 생성할 때, qr\_flutter 패키지를 사용할 수 있습니다. 이 패키지는 QR 코드를 생성하고 사용자 지정할 수 있는 기능을 제공합니다.

#### &#x20;  기본 QR 코드                                         이미지 overlay QR 코드

![](/files/sGN9EpD95S7qpzKD1A5f)      ![](/files/LnmyIYXbMskIeG2gbxZn)

**QR 코드 생성하기**

아래 코드 예제에서는 `qr_flutter` 패키지를 사용하여 다양한 QR 코드를 생성하는 방법을 설명합니다.

```dart
QrImage(
  data: '123456789',
  version: QrVersions.auto,
  size: 100,
);
```

* ***`data`***: QR 코드에 포함될 데이터입니다. 위의 예시 코드에서는 "123456789"로 설정되어 있습니다.
* ***`version`***: QR 코드 버전을 자동으로 선택하도록 설정합니다. 다른 버전을 선택할 수도 있습니다.
* ***`size`***: QR 코드의 크기를 설정합니다.

**QR 코드에 이미지 추가하기**

QR 코드에 이미지를 추가하여 사용자 지정 디자인을 생성할 수 있습니다. 예를 들어, QR 코드의 중앙에 로고를 추가하거나 이미지를 겹쳐서 QR 코드를 디자인할 수 있습니다.

```dart
QrImage(
  data: 'Image QR code',
  version: QrVersions.auto,
  size: 200,
  embeddedImage: AssetImage('assets/jpg/photo.jpeg'),
  embeddedImageStyle: QrEmbeddedImageStyle(size: Size(80, 80)),
);
```

* ***`embeddedImage`***: QR 코드에 포함할 이미지입니다. 위 코드에서는 'photo.jpeg' 이미지를 사용하고 있습니다.
* ***`embeddedImageStyle`***: 포함된 이미지의 크기 및 스타일을 설정합니다. 위 코드에서는 이미지 크기를 80x80으로 설정하고 있습니다.

QR 코드 생성 및 사용자 지정을 통해 Flutter 앱에서 다양한 QR 코드를 만들 수 있습니다. QR 코드는 정보 공유 및 인식을 위한 효율적인 도구로 널리 활용됩니다.

**QR 코드 활용 예시**

* 제품 바코드 및 인식
* 웹 링크 또는 URL 공유
* 연락처 정보 공유
* 이벤트 및 쿠폰 코드 생성

이러한 활용 예시를 고려하여 QR 코드를 생성하고, 적절한 정보를 포함하여 앱 개발에 활용할 수 있습니다.&#x20;

## QR 코드 스캔&#x20;

QR 코드 스캔은 Flutter 앱에서 간단한 설정으로 구현할 수 있습니다. `qr_code_scanner` 패키지를 사용하여 QR 코드를 스캔하고 그 내용을 읽어올 수 있습니다.

**QR 코드 스캔하기**

QR 코드 스캔을 구현하려면 `QRView` 위젯을 사용하고, `onQRViewCreated` 콜백을 통해 스캔된 QR 코드의 결과를 처리합니다.

```dart
QRView(
  key: GlobalKey(debugLabel: 'QR'),
  onQRViewCreated: _onQRViewCreated,
);
```

* ***`onQRViewCreated`***: QR 코드 스캐너가 준비되면 호출되는 콜백 함수입니다. 여기서 QR 코드 스캐너를 제어하고 스캔 결과를 처리합니다.

**스캔 결과 처리하기**

스캔된 QR 코드의 결과를 처리하기 위해 다음 코드를 사용합니다.

```dart
void _onQRViewCreated(QRViewController controller) {
  this.controller = controller;
  controller.scannedDataStream.listen((scanData) {
    setState(() {
      result = scanData;
    });
  });
}
```

* ***`scannedDataStream`***: QR 코드 스캐너에서 스캔된 데이터를 스트림으로 제공합니다. 스트림을 수신하여 스캔된 QR 코드의 형식과 내용을 읽어옵니다.

**스캔 결과 표시하기**

스캔된 QR 코드의 결과를 화면에 표시합니다.

```dart
Center(
  child: (result != null)
      ? Text(
          'Barcode Type: ${describeEnum(result!.format)} Data: ${result!.code}')
      : Text('Scan a code'),
);
```

* ***`result`***: 스캔된 QR 코드의 결과가 저장되는 변수입니다. QR 코드 스캔이 성공하면 해당 결과가 표시됩니다.

QR 코드 스캔은 정보 수집 및 앱 에서의 QR 코드 활용을 위한 중요한 기능입니다. Flutter 앱에서 QR 코드 스캔을 구현함으로써 사용자가 QR 코드를 통해 데이터를 손쉽게 입력하고 공유할 수 있습니다.

**활용 예시**

* 제품 및 서비스 등록을 위한 QR 코드
* 웹사이트, 앱 링크 및 URL 열기
* Wi-Fi 네트워크 설정 자동화
* 엑세스 코드 또는 이벤트 티켓 확인

QR 코드 스캔을 통해 앱의 기능을 확장하고 사용자 경험을 개선할 수 있습니다.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/qr.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
