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

이제 데스크탑앱을 만들면서 내 UI에 적용을 해보려고 한다.

적용하면서 이런 부분은 이렇구나 하는 부분을 적어보려고 한다.

(이제 Flutter를 시작해서 상당히 비효율적인 코드와 틀린 부분이 있을 수 있으니 많은 피드백 부탁드립니다!)

 

 

1. AppWindow와 SystemTray

AppWindow객체와 SystemTray 객체가 필요하다.

AppWindow는 현재 만들어진 가장 최상위 Window를 의미하고 SystemTray는 tray에 넣기 위한 객체이다.

 

  final AppWindow _appWindow = AppWindow();
  final SystemTray _systemTray = SystemTray();

 

2. Future

Dart에서 Future는 미래에 어떤 값을 받아야한다면 받는 클래스다. 비동기로 처리할 일이 있으면 사용을 하면 되는데 예제 코드에서는 Future <void>로 return type을 지정해두었다. 근데 실제로 나는 값을 그렇게 받을 일이 없어서 그냥 void return type으로 해도 되지 않을까 하는 생각이 있다. 그리고 이 함수는 항상 비동기로 수행이 되어야 한다고 생각해서 async키워드를 붙여줬다.

 void initSystemTray() async

 3. Icon

전에 작성한 글에서 Icon을 asset에 등록하는걸 본 적이 있다. 중요하다.

https://developer-youn.tistory.com/80?category=887215 

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

저 icon이 tray에서 보여질 icon이다.

String _iconPath = Platform.isWindows ? './assets/app_icon.ico' : './assets/app_icon.png';

    await _systemTray.initSystemTray(
      title: "turtle kneck alert", 
      iconPath: _iconPath,
      toolTip: 'is running'
      );

그리고 tray에서 우클릭 했을 때 보일 context menu도 정의를 해야 한다.

 

4. Context menu

    final menu = [
      MenuItem(label: 'open', onClicked: _appWindow.show),
      MenuItem(label: 'hide', onClicked: _appWindow.hide),
      MenuItem(
        label : 'start alert'
      ),
      MenuItem(label: 'stop alert'),
      MenuItem(label: 'exit', onClicked: _appWindow.close),
    ];

menu는 MenuItem을 List로 가지고 있다. 저게 Dart스럽게 코드가 변해야 한다면 아마 이러지 않을까.

    final menu = <MenuItem>[
      MenuItem(label: 'open', onClicked: _appWindow.show),
      MenuItem(label: 'hide', onClicked: _appWindow.hide),
      MenuItem(
        label : 'start alert'
      ),
      MenuItem(label: 'stop alert'),
      MenuItem(label: 'exit', onClicked: _appWindow.close),
    ];

앞에 <MenuItem>이라고 타입을 붙여주었다. 그리고 각 MenuItem을 추가하면서 보일 이름(label)과 각 MenuItem이 눌렸을 때 하는 행동에 대해 정의를 했다. 아직 onClicked가 붙지 않은 건 기능이 구현되지 않아서이다.

_appWindow.show로 하면 window가 보이고 _appWindow.hide로 하면 작업표시줄에서 사라지면서 tray에만 남게 된다.

_appWindow.close를 하면 프로그램을 종료한다.

 

이렇게 만든 메뉴를 set 해주면 된다.

await _systemTray.setContextMenu(menu);

5. 이벤트 확인

어떤 이벤트가 들어왔는지 확인을 해야 할 때가 있다. 특히 우클릭했을 때 contextMenu가 나오게 하려면 말이다.

    _systemTray.registerSystemTrayEventHandler((eventName) {
      debugPrint("eventName : $eventName");
      if(eventName == "leftMouseDown") {

      } else if (eventName == "leftMouseUp"){
        _appWindow.show();
      }
      else if(eventName == "rightMouseDown") {

      } else if(eventName == "rightMouseUp"){
        _systemTray.popUpContextMenu();
      }
    });

 

6. 초기화

위에서 열심히 잘 만들었으면 이제 초기화를 해줘야 한다.

내가 만든 app에 대해서 상태를 관리하는 클래스에서 가장 먼저 불리는 건 initState함수이니까 위에서 정리한 내용을 하나의 함수로 잘 만들어서 거기서 불러주면 된다.

  @override
  void initState() {
    super.initState();
    initSystemTray();
  }