[Flutter] bottomNavigationBar svg 커스텀 아이콘 selectedIconTheme 적용하기

개요

bottomNavigationBar 객체 속성 중 selectedIconTheme를 선언하여 선택된 아이콘에 대한 색상 등을 설정할 수 있습니다. 그러나 이는 플러터 Icon 객체에 한해서 적용됩니다. 만약 svg 파일을 아이콘으로 사용하고 있는 경우 적용되지 않습니다.

svg 파일을 사용하여 커스텀 아이콘이 selectedIconTheme 설정에 적용되기 위한 방법을 안내합니다.

 

svg 파일 변경

아래 사이트에서 svg파일을 업로드하여 아이콘 형식에 적합한 형태로 만들어 줍니다. 

FlutterIcon - Flutter custom icons generator

올바른 형태로 업로드되지 않는 경우 일러스트레이터에서 object > compound path > make 후 object > path > outline stroke 실행 후 저장해 주세요. 저장된 파일을 다시 업로드해보세요.

업로드가 모두 완료되었으면 우측 상단 download 를 통해 다운로드합니다.

 

구성

받은 파일 구성은 다음과 같습니다.

• xx_xx_icons.dart :  플러터 IconData 객체로 사용가능하도록 각 아이콘의 위치( ttf 파일 내부에서의? ) 등의 정보를 가진 dart 파일입니다.
• fonts/XxXx.ttf : 다운로드한 모든 아이콘들에 대한 데이터가 정의된 파일입니다. 
• config.json : 다운로드한 모든 아이콘들에 관한 데이터로 사이트에서 재활용 가능합니다.

 

fonts 명시

기타 정적 파일들과 같이 pubspec.yaml에 xx_xx.ttf 를 명시합니다. 저는 font 디렉토리를 루트 디렉토리에 생성하여 XxXx.ttf 파일을 넣어두었습니다.

flutter:
...
  fonts:
    - family: XxXx
      fonts:
        - asset: font/XxXx.ttf

 

dart 파일 저장

xx_xx.dart 파일을 프로젝트에 저장해주세요, 저는 lib/common 디렉토리 내부에 넣었습니다.

 

활용

아래와 같이 BottomNavigationBar items 속성에 아이콘으로 사용할 수 있습니다. selectedIconTheme가 적용되는 것을 확인할 수 있습니다.

unselectedIconTheme: IconThemeData(color: ColorStyle.grey200),
selectedIconTheme: IconThemeData(color: ColorStyle.blue600),
...
items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Container(
                padding: EdgeInsets.fromLTRB(0, 0, 0, 8),
                child: Icon(
                  BottomBar.icon_main,
                  size: 16,
                )),
            label: '메인',
            backgroundColor: ColorStyle.white,
          ),

 

참고 자료

selectedItemColor property - BottomNavigationBar class - material library - Dart API

Icons class - material library - Dart API

[Flutter] custom icon 등록하기

How to use custom images