한국어 설명

Font Size Page와 Font Family Page의 View를 모두 반응형으로 새로 고쳤습니다.

영어 설명

Every view of the Font Size Page and the Font Family Page is rewritten to implement responsive app design.

한국어 설명

기여자 페이지의 가로모드 View를 만들었습니다.

영어 설명

Landscape View of the Contributor Page is implemented.

한국어 설명

글자 크기 및 글꼴 조절 페이지의 가로모드를 만들었고, 개인정보 처리방침, 오픈소스 라이선스, 그리고 기여자 항목을 만들었습니다.

기여자 페이지 사진에 나오는 건물 이름은 경희대학교의 노란지붕입니다.

영어 설명

The landscape view of Font Size Page and Font Family Page. Privacy, Licenses, and Contribution Page is implemented as well.

The name of the building in the photo of Contributor Page is Yellow Roof in the Kyung-Hee University.

한국어 설명

이전 일기에서는 Font Family Page 내부에서 flutter_hooks로 글꼴을 변경하였는데, hooks_riverpod을 이용하여 이를 해당 Page 외부까지 적용되게 하였습니다.

영어 설명

For font family is changed by flutter_hooks in the previous diary, hooks_riverpod is implemented to apply the font family outside the Font Family Page.

한국어 설명

글꼴 조절 기능을 추가하였습니다. 방법은 글자 크기 조절 기능과 같습니다.

영어 설명

Font family setting feature is implemented. The method is same as font size setting.

한국어 설명

Google Admob open app ads를 full screen ads로 교체하였습니다. Font Size Page에 저장 및 취소 버튼을 만들었습니다. 즉 Font Size Page 내부에서는 flutter_hooks로 상태 관리를 하고, 그 밖의 페이지에서는 hooks_riverpod으로 관리됩니다.

영어 설명

Google Admob open app ads is replaced with Google Admob full screen ads. Save and back button is created on the Font Size Page. In other words, inside the Font Size Page flutter_hooks is implemented for state management system, and outside the Page so is hooks_riverpod.

한국어 설명

Google Admob 전면 광고를 도입하였습니다.

영어 설명

Google Admob app open ads are implemented.

한국어 설명

Right Page에 글자 크기 조절 항목을 만들어, Font Size Page와 연결하였습니다.

영어 설명

Font size setting item is created on the Right Page, and connected with the Font Size Page.

한국어 설명

약 3천 줄 정도 되는 코드를 GetX에서 flutter_hooks와 hooks_riverpod로 새롭게 짰습니다. Syncfusion사의 플러그인을 사용하여 Font Size Page를 만들고, fluro로 라우트 연결을 하였습니다.

영어 설명

I rewrote about 3000 lines of code from using GetX to flutter_hook and hooks_riverpod. Font Size Page is created with a plugin by the Syncfusion, and connected the page with fluro router.

한국어 설명

앱 아이콘을 적용하였습니다. 본 아이콘에 관하여 상표권 출원을 하였습니다.

영어 설명

I implemented the app icon and applied it for a trademark.

한국어 설명

디바이스의 방향을 감지하여 가로 모드와 세로 모드를 전환합니다. 옵저버 패턴을 사용하였으며, 상태 관리는 GetX로 하였습니다.

영어 설명

The app detects the orientation of user device and converts between portrait mode and landscape mode. I implemented observer pattern with GetX for state management system.

한국어 설명

Center Page에서 View의 초안을 작성하였습니다. Google의 Flat Design의 디자인 규칙을 따랐으며, Material Design은 적용하지 않았습니다.

영어 설명

I drafted the View of the Center Page, following design rules of Google Flat Design, rather than Google Material Design.

한국어 설명

블러 효과를 없던 기능으로 만들었습니다. 버벅임이 줄어들었으나, 아직도 존재합니다.

영어 설명

Blur effect was rolled back. The decision reduced lagging, but it still exists.

한국어 설명

선택된 item의 inkwell 효과에 블러 처리를 하였습니다. 이 시점부터는 앱이 심각하게 느려져서, 결국 위 기능은 취소되어 없는 일이 되었습니다.

영어 설명

I applied blur process to the inkwell effect of selected items. However, this process was eventually withdrew because the app became severely lagging.

한국어 설명

Left Page에서 많아야 하나의 item만 열리는 Expansion Panel List를 서울시립대학교 공지 메타데이터에 적용하였습니다. GetX로 구현하였는데, 이 때부터 Galaxy S20+에서 버벅이기 시작했으나 녹화 앱의 영향이라고 여겨 무시하였습니다.

영어 설명

For metadata of the news of the University of Seoul, I applied on the Left Page the Expansion Panel List in which at most only one item is expanded. GetX was used for the implementation, but I overlooked my Galaxy S20+ lagging, guessing that the reason lay in my recording app.

한국어 설명

하나의 아이템이 열리면 다른 모든 아이템이 닫히는 Expansion Panel List를 임시로 Right Page에 구현하였습니다. 즉 이 Expansion Panel List에는 많아야 하나의 아이템만 열려 있게 됩니다. 상태 관리에는 GetX를 사용하였으며, item의 수만큼 controller를 만들어 여닫음의 상태를 관리합니다.

영어 설명

Temporarily on the Right Page, I implemented another Expansion Panel List which collapses all the other items when one is expanded. In the other words, at most only one item is expanded in this Expansion Panel List. I used GetX for state management system, and it creates as many controllers as the number of items for managing the state of their expansion and collapse.

한국어 설명

Left Page에서 항목이 선택되었을 때, 화면을 Left Page에서 Center Page로 옮기는 기능을 구현하였습니다. 상태 관리에는 GetX를 사용하였으며, 그러므로 모든 위젯은 stateless입니다.

영어 설명

I implemented a feature moving the main page from Left Page to Center Page when some item is selected in the Left Page. GetX is used for state management system so every widget remains stateless.

한국어 설명

Left Page에서 Center Page로 가져온 메타데이터의 항목에 따라, remote repository는 웹 서버에 서울시립대학교 공지를 호출하여 문자열로 출력합니다. 모든 텍스트의 색상은 디바이스의 밝기에 따릅니다. 상태 관리에는 GetX를 사용하였습니다.

영어 설명

The remote repository requests the news of the University of Seoul to web server, following the item of metadata from Left Page to Center Page. Every color of text is following the brightness of user device. GetX is used for the state management system.

한국어 설명

Left Page의 Expansion Panel List에서 항목을 선택했을 때, 상태 관리 시스템이 해당 항목을 Center Page까지 가져오도록 하였습니다. 모든 텍스트의 색상은 디바이스의 밝기에 따릅니다. 상태 관리에는 GetX를 사용하였습니다.

영어 설명

When user selects some item in the Expansion Panel List from Left Page, the state management system captures the item to the Center Page. Every color of text is following the brightness of user device. GetX is used for the state management system.

한국어 설명

백엔드에 미리 만들어 뒀던 학교 공지 메타데이터를 받아와 프론트엔드의 Left Page에서 Expansion Panel List로 구현하였습니다. 텍스트의 밝기 또한 디바이스의 밝기 상태에 따라 관리됩니다. 모두 GetX로 구현하였습니다.

영어 설명

On the news of the University of Seoul, I brought metadata of the news from backend and implemented it on the Left Page of frontend with Expansion Panel List. Additionally, the brightness of text is managed by the brightness of device. All features are created with GetX.