[flutter] flutter_svg에서 이미지에 라인 스타일(line style)을 적용하는 방법은?
flutter_svg
패키지를 사용하여 SVG(Scaleable Vector Graphics) 이미지에 라인 스타일을 적용할 수 있습니다. 라인 스타일을 변경하여 이미지를 더욱 독특하게 만들 수 있습니다.
1. Flutter 프로젝트에 flutter_svg 추가하기
먼저, pubspec.yaml
파일에 flutter_svg
패키지를 추가합니다.
dependencies:
flutter_svg: ^0.22.0
그런 다음 터미널에서 다음 명령을 사용하여 패키지를 가져옵니다.
flutter pub get
2. SVG 이미지 파일 준비하기
SVG 이미지 파일을 프로젝트의 assets
폴더에 추가합니다.
3. 라인 스타일 적용하기
SVG 이미지의 라인 스타일을 변경하려면 flutter_svg
위젯에서 SvgPicture
위젯을 사용하여 이미지를 로드한 다음 Paint
속성을 사용하여 라인 스타일을 적용합니다.
다음은 라인 스타일을 적용하는 예제 코드입니다.
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class LineStyledSVGImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Line Styled SVG Image'),
),
body: Center(
child: SvgPicture.asset(
'assets/your_image.svg',
color: Colors.blue, // 라인 색상 설정
strokeWidth: 2, // 라인 두께 설정
),
),
);
}
}
위 예제에서는 color
및 strokeWidth
속성을 사용하여 이미지의 라인 색상 및 두께를 변경하였습니다.
4. 실행 및 확인
앱을 실행하여 라인 스타일이 적용된 SVG 이미지를 확인합니다.
이제 flutter_svg
를 사용하여 이미지에 라인 스타일을 적용하는 방법을 알게 되었습니다. 만약 추가 질문이 있다면 언제든지 물어보세요!