[flutter] 플러터 아이콘 사용자 정의

18 Dec 2023

flutter

플러터에서는 기본적으로 제공되는 아이콘 뿐만 아니라 사용자가 직접 아이콘을 만들고 사용할 수 있습니다. 여러분의 앱에 독특한 아이콘을 추가해보세요.

1. Custom Icon 생성

우선, 사용할 사용자 정의 아이콘을 Flutter 아이콘 폰트로 제작해야 합니다. 이를 위해 아이콘을 SVG 또는 다른 이미지 형식으로 디자인한 뒤, 해당 이미지를 Flutter 아이콘 폰트로 변환하는 도구를 사용하세요.

아래는 Flutter에서 사용할 수 있는 사용자 정의 아이콘의 예시입니다.

class MyCustomIcons {
  MyCustomIcons._();

  static const IconData myIcon = IconData(
    0xe800,
    fontFamily: 'MyCustomFont',
  );
}

위 코드에서 myIcon은 사용자 정의 아이콘을 나타내며, MyCustomFont는 해당 아이콘을 포함한 사용자 정의 아이콘 폰트를 가리킵니다.

2. 사용자 정의 아이콘 표시

다음으로, 위에서 만든 사용자 정의 아이콘을 표시하려면 다음과 같이 하면 됩니다.

Icon(
  MyCustomIcons.myIcon,
  size: 48.0,
)

위 코드를 사용하여 사용자 정의 아이콘을 화면에 표시할 수 있습니다.

3. 추가적인 작업

만약 사용자 정의 아이콘을 갖는 위젯을 만들고 싶다면, 다음과 같이 하면 됩니다.

class MyCustomIconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(MyCustomIcons.myIcon, size: 36.0);
  }
}

이제 여러분은 플러터 앱에 자체적으로 디자인한 아이콘을 추가할 수 있습니다!

참고 자료

Flutter 아이콘 가이드: https://api.flutter.dev/flutter/widgets/Icon-class.html
Flutter 커스텀 그래픽: https://flutter.dev/docs/development/ui/widgets/custom-painting