우당탕탕 Flutter 학습기 - System tray(1)

데스크탑앱을 Flutter로 하나 만들고 싶어져서 이것저것 보고 있는데 System tray에 넣는걸 먼저 어떻게 넣나 좀 보려고 했다.

내가 사용한건 system_tray 패키지다.

https://pub.dev/packages/system_tray

system_tray | Flutter Package

 

좋은 세상.. 그대로 넣고 돌리면 되는 코드가 존재했다.

물론 빨간줄이 잔뜩 나온다. 필요한 패키지를 설치하지 않았기 때문이다. vscode기준으로 저기 빨간줄 난 패키지 위에 마우스를 가져다 대면 quick fix 메뉴가 나오는데 거기서 install하면 된다.

빌드 커맨드는 다음과 같다

flutter run -d [Flatforms]
//e.g. flutter run -d windows

근데 처음 빌드를 수행하면 Window에서 developer mode를 On으로 바꾸라는 명령어가 나타났다.

시작메뉴의 설정에 들어가서 개발자용으로 들어가면 모드 변환 토글이 존재했다.

 

성공적으로 빌드하면 이런 화면이 나온다.

아니 근데 분명히 나는 system tray에 넣는걸 원했는데 존재하지 않는다. 이유를 잘 찾아보니 icon이 필요한데 그 icon이 있는 assets을 등록하지 않았다.

 Future<void> initSystemTray() async {
    String path =
        Platform.isWindows ? './assets/app_icon.ico' : './assets/app_icon.png';

    List<String> iconList = ['drarts_icon', 'gift_icon'];

Windows면 저기서 app_icon.ico를 사용한다.

 

flutter에서 사용할 이미지들에 대해서 경로를 맞춰주어야하는데 속편하게 하나의 폴더에 몰아넣고 사용하자.

 

pubspec.yaml에 가면 이런 코드를 가진 부분이 존재한다.

# The following section is specific to Flutter.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

저기 flutter 밑에 이렇게 수정해주자.

# The following section is specific to Flutter.
flutter:
  assets:
    - assets/
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

나는 필요한 모든 아이콘을 assets폴더에 넣어두었다. 그 assets폴더를 저렇게 넣었으면 현재 수행중인 프로젝트에서 lib과 같은 레벨로 맞춰주면 된다.

 

그러면 tray에 잘 나온다. 이제 저 코드를 분석하고 잘 써먹어보자.