[flutter] flutter_svg에서 이미지 위치 조정 방법은?

08 Dec 2023

flutter

flutter_svg를 사용하여 이미지를 표시할 때 이미지의 위치를 조정하는 방법은 다양합니다. 주로 alignment 및 position을 사용하여 이미지를 조정할 수 있습니다.

1. Alignment 속성 사용

SvgPicture.asset(
  'assets/image.svg',
  alignment: Alignment.center,
  width: 200,
  height: 200,
)

위 예제에서 alignment 속성을 사용하여 이미지를 가운데로 정렬하였습니다. Alignment 속성을 사용하여 이미지의 위치를 조정할 수 있습니다.

2. Container 및 Positioned 속성 사용

Container(
  width: 300,
  height: 300,
  child: Stack(
    children: <Widget>[
      SvgPicture.asset('assets/image.svg'),
      Positioned(
        top: 100,
        left: 100,
        child: SvgPicture.asset(
          'assets/overlay.svg',
          width: 100,
          height: 100,
        ),
      ),
    ],
  ),
)

위 예제에서는 Container와 Stack을 사용하여 이미지 위치를 조정하였습니다. Positioned 위젯을 사용하여 이미지를 원하는 위치로 이동시킬 수 있습니다.

flutter_svg를 사용하여 이미지를 조정하는 방법에 대해 간단히 알아보았습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.