[flutter] flutter_svg에서 텍스트를 이미지에 추가하는 방법은?

08 Dec 2023

flutter

이 포스트에서는 flutter_svg 패키지를 사용하여 이미지에 텍스트를 추가하는 방법에 대해 알아보겠습니다.

1. flutter_svg란?

flutter_svg는 Flutter 앱에서 SVG 이미지를 렌더링하는 데 사용되는 패키지입니다. SVG 이미지를 사용하면 다양한 크기에서 해상도 손실 없이 이미지를 표시할 수 있으며, 텍스트 및 모양을 쉽게 편집할 수 있습니다.

2. flutter_svg로 텍스트 추가하기

이미지에 텍스트를 추가하려면 flutter_svg의 PictureRecorder와 Canvas를 사용하여 이미지를 그리고 텍스트를 렌더링해야 합니다. 다음은 간단한 예제 코드입니다.

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/src/picture_stream.dart';
import 'package:flutter_svg/src/svg/picture_provider.dart';
import 'package:flutter_svg/src/picture_stream.dart';
import 'package:flutter_svg/src/svg.dart';
import 'package:vector_math/vector_math_64.dart' as vector_math;

...

final recorder = PictureRecorder();
final canvas = Canvas(recorder);

final textSpan = TextSpan(
  text: 'Hello, Flutter!',
  style: TextStyle(fontSize: 18, color: Colors.black),
);
final textPainter = TextPainter(
  text: textSpan,
  textDirection: TextDirection.ltr,
);

textPainter.layout();
textPainter.paint(canvas, Offset(100, 100));

final picture = recorder.endRecording();
final svgPicture = SvgPicture.picture(
  picture,
  matchTextDirection: true,
);

...

위의 예제 코드에서는 PictureRecorder를 사용하여 이미지를 그리고, Canvas를 사용하여 텍스트를 렌더링하고 있습니다. 그 후 SvgPicture 위젯을 사용하여 이미지를 표시합니다.

3. 마치며

위 예제는 flutter_svg를 사용하여 이미지에 텍스트를 추가하는 간단한 방법을 보여줍니다. 실제 앱에서는 더 많은 작업과 스타일링이 필요할 수 있으므로, 해당 문서를 참조하여 더 많은 정보를 얻을 수 있습니다.

더 많은 정보를 원하실 경우 flutter_svg 공식 문서를 참조하세요.