[플러터] windows bookmarker - overview

rainmeter

Windows에 널려있는 프로그램이나, 폴더, 인터넷URL을 정리하는 것도, 쉽게 찾는 것도 참으로 귀찮은 일이다. 그런점에서 rainmeter는 참 훌륭한 프로그램이다. 한가지 단점이 있다면, 새로운 북마크를 등록하는게 영 짜증나게 되어있다는 점이다. 물론 raimmeter의 용도는 북마크가 메인 기능이 아니기 때문에 이해는 한다.

 

rainmeter의 설정(ini) 파일

 

 

 

 

그냥 편하게 쓸 수 있는 단순한 기능만 flutter windows app으로 만들수 있지 않을까?

 

 

GitHub - mcjoi/win_bookmarker

 

 

related posting list

📋 [플러터] windows bookmarker - path.json

📋 [플러터] windows bookmarker - uri execution

 

---

 

 

구성

이미 내가 원하는 형태는 rainmeter로 만들었다. 기존 등록된 북마크들을 사용하는데는 전혀 불편함이 없다. 단지 추가나 수정이 귀찮을 뿐이지..

 

아래 그림에서 왼쪽이 rainmeter로 지금 쓰고 있는 형태이고, 우측이 변경을 해볼까 하는 구성이다. 디버깅을 해야하므로 창의 크기를 너무 크게 하지는 않았다.

 

 

 

 

프로그램에 입력창같은 기능은 귀찮으니까, 제외를 하고, 같이 딸려있는 json 파일을 수정하는 형태로 구성하면 좋겠다. 가로 사이즈는 고정이며, 세로 사이즈는 북마크 수량에 따라 자동으로 조정이 됐으면 한다. 이미지만 있으면 뭔지 까먹으니까, 마우스를 아이콘에 오버했을때, 내용을 확인할 수 있으면 된다.

 

여기까지가 머릿속으로 생각해본 구성이다.

 

 

 

패키지

꽤 오랜 세월이 지났으니, flutter windows app이 어느정도 편의를 제공할 수 있는 수준이 된 듯하다. 큰 무리없이 exe파일까지 build를 할 수 있었다.

 

몇가지 핵심만 요약해서 정리를 해둔다.

 

window manager

pub.dev에서 windows의 프로그램 창을 관리할 수 있는 첫번째 패키지를 선택했다. 좋은건지 나쁜건지는 모르겠지만, 내가 사용할 기능정도는 있는 것같다.

 

 

window_manager | Flutter package

 

 

main() 에서 초기화

 // Initialize the window manager

  await windowManager.ensureInitialized();

 

기본 창사이즈를 정해주고,

  double windowWidth = 240;

  double windowHeight = 340 + addsize();

  double posX = 1920 - windowWidth - 20; // 오른쪽 끝에서 약간 떨어진 위치

  double posY = 1080 - windowHeight - 50; // 아래쪽 끝에서 약간 떨어진 위치

  WindowOptions windowOptions = WindowOptions(

    size: Size(windowWidth, windowHeight),

    alwaysOnTop: true,

    minimumSize: Size(windowWidth, windowHeight),

    maximumSize: Size(windowWidth, windowHeight),

  );

 

몇가지 세부사항들을 정해준다.

  windowManager.waitUntilReadyToShow(windowOptions, () async {

    windowManager.setPosition(Offset(posX, posY));

    windowManager.setHasShadow(false);

    windowManager.setMaximizable(false);

    windowManager.setMinimizable(false);

    // windowManager.setClosable(false);

    windowManager.setPreventClose(true);

    windowManager.addListener(MyWindowListener());

    await windowManager.show();

    await windowManager.focus();

  });

 

 

 

flutter_acrylic

그냥 만들면 재미가 없으니, 아크릴 패키지로 데코레이션을 해준다. 그런데... 자꾸 외곽선에 5픽셀정도 삑사리가 나서, 내 잘못인지, 윈도우10 잘못인지 몰라서, transparent 옵션으로만 설정했다.

 

flutter_acrylic | Flutter package

 

초기화와 effect 설정정도면 간단하게 끝이다.

  await Window.initialize();

  await Window.setEffect(

    effect: WindowEffect.acrylic,

    // color: fc.Colors.black.withAlpha(200),

    dark: true,

  );

 

 

 

 

system_tray

항상 떠 있는 창이다 보니 가끔 걸리적거릴 때가 있다. 사용하지 않거나 화면을 많이 가리게 되는 경우는 system tray에 내려 둘 수 있도록 아래 패키지를 사용한다. 그냥 샘플에 있는 코드를 넣는 것만으로도 활성화가 가능한 아주 신박한 패키지이다. 

 

 

system_tray | Flutter package

 

 

 

 

 

 

결과물

대충 json파일까지 적용한 모습은 아래와 같다. 마우스를 오버하면, 내용이 무엇인지, 타이틀이 나오도록 json파일을 타이틀, 이미지경로, target URI 로 작성을 했다. 그런데 app을 켜둔 상태에서 json파일을 수정하는 경우가 있어, 맨 마지막에는 refresh 버튼을 두었다. 사실 refresh라기 보다는 강제 종료 후 재실행이랄까?

 

 

 

 

 

 

 

 

끝.