[Flutter] 앱 아이콘 설정하기

Gihongg·2023년 11월 12일
0

Flutter

목록 보기
4/4

1. 아이콘 제작하기

https://www.flaticon.com/

위의 웹사이트에서 원하는 아이콘을 찾아서 우측 상단 edit icon을 클릭하면 크기와 색상을 수정할 수 있습니다.

앱의 아이콘을 디자인할 때는 배경대비 조금 작게 디자인하는 것이 좋습니다.
그렇지 않으면 아이콘이 너무 커서 잘려서 보이거든요.


2. 아이콘 이미지를 flutter파일에 추가하기

이제 만든 아이콘을 png다운받아서 flutter 앱 파일에 추가 해줍니다.

어디에 하는지는 상관없습니다. 하지만 가장 바깥에(루트에) 폴더를 하나 추가해서 거기에 이미지들을 저장하는게 좋습니다.

3. pubspec.yaml에 icons_launcher 추가하기 (패키지 받기)

flutter pub add --dev icons_launcher

위의 코드를 앱 경로의 터미널에서 입력합니다.

이 명령어는 icons_launcher: ^2.1.5pubspec.yaml의 dev_dependencies 에 추가합니다.


4. pubspec.yaml에서 아이콘 지정하기


icons_launcher:
  image_path: 'assets/icon_image.png'						#여기에 아이콘의 경로를 넣어줍니다.
  platforms:
    android:
      enable: true											#안드로이드용
      adaptive_background_color: '#320067'					#여기에 아이콘이 배경색상을 정해줍니다. (HEX코드)
      adaptive_foreground_image: 'assets/icon_image.png'	#여기에 아이콘의 경로를 넣어줍니다.
      
    ios:
      enable: true											#아이폰용
      image_path: 'assets/icon_image.png'					#여기에 아이콘의 경로를 넣어줍니다.
      adaptive_background_color: '#320067'					#여기에 아이콘이 배경색상을 정해줍니다. (HEX코드)

위의 코드를 pubspec.yaml의 가장 아래쪽에 추가합니다. (사실 상관없지만 그게 보기 편합니다)

내가 원하는 색상과 아이콘의 경로를 지정해주고 ctrl+s (save 또는 get packages)를 눌러 저장 해줍니다.

그 후 터미널창에 아래의 코드를 입력합니다.

dart run icons_launcher:create

5. 아이콘 설정 완료

그 후 앱을 다시 Run 시키면 아이콘이 설정된 것을 확인할 수 있습니다.

profile
전천후 개발자

0개의 댓글