[flutter] flutter_svg에서 이미지를 회전하는 방법은?

08 Dec 2023

flutter

Flutter 앱을 개발할 때 이미지를 회전시키는 것은 자주 사용되는 기능입니다. 이제 flutter_svg 라이브러리를 사용하여 이미지를 회전하는 방법에 대해 알아보겠습니다.

flutter_svg 라이브러리란?

flutter_svg는 Flutter 앱에서 SVG(Scalable Vector Graphics) 이미지를 표시하는 데 사용되는 라이브러리입니다. SVG는 크기 조정이 가능한 이미지 형식으로, 해상도에 관계없이 이미지를 부드럽게 확대 또는 축소할 수 있습니다.

이미지 회전하기

다음은 flutter_svg를 사용하여 이미지를 회전하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class RotatedSvgImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: 0.785, // radians로 회전 각도를 지정합니다
      child: SvgPicture.asset(
        'assets/images/your_image.svg',
        width: 100,
        height: 100,
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('SVG 이미지 회전 예제'),
      ),
      body: Center(
        child: RotatedSvgImage(),
      ),
    ),
  ));
}

위의 예제 코드에서 Transform.rotate 위젯을 사용하여 이미지를 회전시켰습니다. angle 속성에는 회전할 각도를 라디안으로 지정하며, 해당 속성을 조절하여 이미지를 원하는 각도로 회전시킬 수 있습니다.

이제 flutter_svg 라이브러리를 사용하여 이미지를 회전시키는 방법에 대해 이해하셨으므로, 여러분의 Flutter 앱에서 이를 활용해보시기 바랍니다!

더 많은 정보가 필요하시다면 flutter_svg 패키지의 공식 문서를 참고해보세요.

즐거운 개발 되세요!