Flutter에서 SVG 파일을 Bitmap으로 변환하는 방법

SVG 파일을 Bitmap으로 변환하는 방법

이 글에서는 SVG 파일을 Bitmap으로 변환하는 과정에 대해 설명합니다. 이 과정은 때때로 개발 중 필요할 수 있습니다. 아래의 코드 예제를 통해 자세히 알아봅시다.

SVG to Bitmap 변환 함수

        Future<BitmapDescriptor> _bitmapDescriptorFromSvgAsset(
            BuildContext context, String assetName) async {
            // SVG 파일을 문자열로 읽어옵니다.
            var svgString = await DefaultAssetBundle.of(context).loadString(assetName);

            // 문자열에서 DrawableRoot 객체를 생성합니다.
            var svgDrawableRoot = await svg.fromSvgString(svgString, null);

            // toPicture()와 toImage() 메소드는 픽셀 비율을 인식하지 못하기 때문에 실제 크기를 여기서 계산합니다.
            var queryData = MediaQuery.of(context);
            var devicePixelRatio = queryData.devicePixelRatio;
            
            // SVG의 원래 너비
            var width = 48 * devicePixelRatio;

             // 높이도 동일하게 처리합니다.
             var height = 48 * devicePixelRatio;

             // ui.Picture로 변환합니다.
             var picture = svgDrawableRoot.toPicture(size: Size(width, height));

             // ui.Image로 변환합니다. toImage() 메소드는 너비와 높이를 매개변수로 받습니다. 
             // 화면 DPI를 고려하여 최적의 크기를 찾아야 합니다.
             var image = await picture.toImage(width.toInt(), height.toInt());

             // ByteData로 변환합니다.
             var bytes = await image.toByteData(format: ui.ImageByteFormat.png);

              return BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
        }
    

위 코드블럭은 Flutter에서 사용할 수 있는 SVG 파일을 Bitmap으로 변환하는 함수입니다.