[flutter] 플러터 프로바이더를 사용하여 QR 코드 스캔하기

22 Dec 2023

flutter

Provider 패키지 추가

먼저, pubspec.yaml 파일에 Provider 패키지를 추가합니다.

dependencies:
  provider: ^5.0.0

그런 다음, 터미널에서 flutter pub get 명령을 사용하여 패키지를 설치합니다.

모델 및 프로바이더 생성

다음으로, QR 코드 데이터를 관리할 모델 클래스를 만들고, 이를 Provider로 래핑한 클래스를 작성합니다.

class QrCodeData {
  String data;
  
  QrCodeData(this.data);
}

class QrCodeProvider with ChangeNotifier {
  QrCodeData _qrCodeData;
  
  QrCodeData get qrCodeData => _qrCodeData;
  
  void setQrCodeData(String data) {
    _qrCodeData = QrCodeData(data);
    notifyListeners();
  }
}

위의 코드에서 ChangeNotifier를 상속한 QrCodeProvider 클래스를 생성하고, 해당 클래스 내에서 QR 코드 데이터를 저장하고 업데이트하는 메서드를 구현합니다.

QR 코드 스캐너 화면

이제 QR 코드 스캐너 화면을 작성하고, Provider를 사용하여 데이터를 저장하는 방법을 살펴보겠습니다.

class QrScannerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<QrCodeProvider>(
      builder: (context, qrCodeProvider, child) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            // QR 코드 스캔기 관련 위젯 및 로직 구현
            FlatButton(
              onPressed: () {
                String scannedData = "example_qr_code_data";
                qrCodeProvider.setQrCodeData(scannedData);
              },
              child: Text('모의 QR 코드 스캔'),
            )
          ],
        );
      },
    );
  }
}

위의 코드에서, Consumer 위젯을 사용하여 QrCodeProvider의 데이터를 구독하고, 해당 데이터를 이용하여 QR 코드 스캔 화면을 구현합니다.

이제 Provider를 사용하여 QR 코드 스캔 데이터를 간단히 관리하고 업데이트할 수 있습니다.