[Flutter] QR코드에 검은색 백그라운드 넣어서 공유하기

소개

• 특정 상황에서는, 검정색 배경을 넣어서 공유할때가 필요합니다.

---

목적

1. 위젯트리상 QR위젯이 검정색 백그라운드를 가질필요가 없다.
2. 그러나 공유 할 때는 검정색 백그라운드가 필요하다.
   
   

---

Future<File?> _captureAndSaveQrImage(GlobalKey widgetKey) async {  
  RenderRepaintBoundary boundary =  
  widgetKey.currentContext!.findRenderObject() as RenderRepaintBoundary;  
  var qrImage = await boundary.toImage(pixelRatio: 3.0);  
  ByteData? byteData = await qrImage.toByteData(format: ui.ImageByteFormat.png);  
  
  if (byteData != null) {  
    // 검은색 배경 이미지 생성  
    ui.Image blackBgImage = await _createBlackBgImage(qrImage);  
  
    // 새 이미지의 바이트 데이터 가져오기  
    ByteData? newByteData = await blackBgImage.toByteData(format: ui.ImageByteFormat.png);  
  
    if (newByteData != null) {  
      Directory tempDir = await getTemporaryDirectory();  
      String tempPath = tempDir.path;  
      File file = File('$tempPath/qr_with_black_bg.png');  
      await file.writeAsBytes(newByteData.buffer.asUint8List());  
      return file;  
    }  
  }  
  return null;  
}  
  
// 검은색 배경 이미지에 QR 코드를 그리는 함수  
Future<ui.Image> _createBlackBgImage(ui.Image qrImage) async {  
  final recorder = ui.PictureRecorder();  
  final canvas = Canvas(recorder);  
  
  // 검은색 배경 그리기  
  Paint paint = Paint()..color = Colors.black;  
  canvas.drawRect(Rect.fromLTWH(0, 0, qrImage.width.toDouble(), qrImage.height.toDouble()), paint);  
  
  // 검은 배경 위에 QR 이미지 그리기  
  paintImage(canvas: canvas, rect: Rect.fromLTWH(0, 0, qrImage.width.toDouble(), qrImage.height.toDouble()), image: qrImage);  
  
  // 캔버스를 이미지로 변환  
  final ui.Image blackBgImage = await recorder.endRecording().toImage(qrImage.width, qrImage.height);  
  return blackBgImage;  
}

---

_captureAndSaveQrImage 함수

이 함수는 QR 코드 이미지를 캡처하고 저장하는 주요 기능을 수행합니다.

• RenderRepaintBoundary: widgetKey.currentContext.findRenderObject()를 사용하여 현재 위젯의 RenderObject를 가져옵니다. RenderRepaintBoundary는 위젯의 렌더링된 영역을 나타냅니다. 이를 통해 위젯의 이미지를 캡처할 수 있습니다.

• toImage: boundary.toImage(pixelRatio: 3.0)는 위젯의 이미지를 캡처하고, ui.Image 객체로 변환합니다. pixelRatio는 이미지의 품질을 조정합니다.

• toByteData: 캡처된 이미지를 ByteData 형식으로 변환합니다. 이 데이터는 파일로 저장될 수 있는 원시 바이너리 데이터입니다.

• 파일 저장: 최종적으로 File 객체를 생성하고, 새로운 이미지 데이터를 파일로 저장합니다. getTemporaryDirectory()를 사용하여 임시 디렉토리의 경로를 가져옵니다.

_createBlackBgImage 함수

이 함수는 QR 코드 이미지에 검은색 배경을 추가하는 기능을 수행합니다.

• ui.PictureRecorder: 새로운 이미지를 그리기 위한 PictureRecorder 객체를 생성합니다. 이 객체는 캔버스에 그려진 모든 것을 기록합니다.

• Canvas 객체 생성: Canvas 객체를 recorder와 함께 생성하여, 여기에 그림을 그릴 수 있게 합니다.

• 검은색 배경 그리기: Paint 객체를 생성하고 색상을 검은색으로 설정한 후, 캔버스에 검은색 사각형을 그립니다. 이 사각형이 배경 역할을 합니다.

• QR 이미지 그리기: paintImage 함수를 사용하여 캡처된 QR 이미지를 검은 배경 위에 그립니다.

• 이미지로 변환: recorder.endRecording().toImage()를 호출하여 캔버스에 그려진 내용을 ui.Image로 변환합니다.