hamiric 님의 블로그

반응형 UI를 사용해야 하는 이유반응형 UI는 화면 크기나 디바이스 유형에 따라 동적으로 디자인 요소를 재배치 하는 것이다. 반응형 UI의 중요도는 최근 들어서 점점더 높아지고 있는데,여러 가지 종류의 휴대폰 및 태블릿 모델이 등장함에 따라, 보다 다양한 화면 크기에 대비할 필요성이 높아졌기 때문이다.  일반적인 화면 크기에 따른 UI 재배지 분기점 (Breakpoint)디바이스의 가로 크기를 기준으로 분기점을 설정하는데, 일반적인 기준은 다음과 같다. (dp 기준)   반응형 UI 사용하기LayoutBuilder를 이용하여, 각 분기점 마다의 UI 위젯을 반환시키는 방식과 MediaQuery 를 사용하는 방식이 주로 사용된다. LayoutBuilder 방식부모 위젯의 크기에 따라 자식 위젯의 배치를 조..

go_router | Flutter packageA declarative router for Flutter based on Navigation 2 supporting deep linking, data-driven routes and morepub.dev GoRouter 라이브러리란?URL 기반 네비게이션 패키지로써, 어플리케이션의 여러 페이지들을 전환할때 마치 웹의 주소창을 사용할때 처럼 할 수 있게 해주는 라이브러리이다. 때문에 GoRouter는 URL 중심의 라우팅 방식을 채택하여 웹과 모바일 모두에서 URL 상태를 동기화하고 관리하기에 용이하고, 각 경로(route)를 선언적으로 정의할 수 있어 라우팅 구조를 한눈에 파악할 수 있다. 또한 특징으로는, URL 을 사용할때처럼 template synt..

테마 커스터마이징이 필요한 이유?대부분의 실전 프로젝트에서는, 하나의 어플리케이션에서 다양한 디자인, 색상등등을 여러개 정의해야 할 때가 많다.이때, ThemeData의 기본 속성만으로는 모든 색상 및 디자인을 정의하기에는 제한이 따르기 때문이다. 테마 커스터마이징AppThemeExtension 확장 클래스 선언AppThemeExtension의 원본 코드는 수정하지 않고, 새로운 메서드나 속성을 추가하는 방식이다.확장에 대한 설명은 밑의 확장 메서드를 설명할때 보다 자세히 설명한다.class AppThemeExtension extends ThemeExtension { const AppThemeExtension({ required this.main, required this.mainLight,..

NotificationListener애플리케이션에서 이벤트나 알림을 수신하고, 처리하는데 주로 사용되는 위젯.알림을 통해 위젯 트리간의 통신을 간소화 하여 다양한 이벤트에 대해 효율적으로 반응할 수 있게 한다. NotificationListener class - widgets library - Dart APINotificationListener class A widget that listens for Notifications bubbling up the tree. Notifications will trigger the onNotification callback only if their runtimeType is a subtype of T. To dispatch notifications, use the N..

효율적인 이벤트 처리 기법을 사용해야 하는 이유효율적인 이벤트 처리 기법을 사용하게 되면, 앱 성능을 최적화 할 수 있고, 자원을 절약할 수 있기 때문이다.또한, 통신을 통해 데이터를 주고받는 경우에서는, 불필요한 요청을 방지하여 트래픽을 감소시킬 수 도 있다. 최적화가 잘 된 어플리케이션은, 무엇보다 사용자가 앱을 이용하는데 부담이 덜 되게끔 하기 때문에, 중요한 스킬이라고 할 수 있다. 이벤트 처리 기법중에는 스로틀링과 디바운싱 이라는 기법들이 존재하며, 이들을 소개하고자 한다. 스로틀링이란?특정 시간 간격 내에서 이벤트가 여러 번 발생하더라도, 그 중 한번만 실행되도록 하게 하는 기능.예를 들어, 사용자가 스크롤을 계속하거나 키를 입력하는 등의 이벤트가 발생할 때, 너무 자주 실행되지 않도록 조절하..

애니메이션이란?애니메이션은 위젯의 속성 (위치, 크기, 색상 등등)을 시간에 따라 변경하여, 시각적인 변화를 부드럽게 보여주는 방식이다.애니메이션은 사용자 경험을 향상시키는 중요한 요소로써, 사용자로 하여금 앱의 동작을 직관적으로 이해시키고, 몰입감을 높이는 데 사용된다. 결과적으로 UI를 움직이는 동작이기 때문에, StatefulWidget에서 사용된다.  애니메이션을 제어하는 속성들애니메이션을 만들기에 앞서, 아래의 애니메이션들을 제어하는 속성들이 있다.애니메이션 효과의 속도를 직접적으로 제어하는 Curve 와 애니메이션 시간을 제어하는 Duration 이다. Curve애니메이션은 기본적으로 0 ~ 1 까지의 진행되는 값을 기반으로 작동한다.Curve 객체는, 0 ~ 1 사이의 진행속도를 변화시키는 ..

클린 아키텍쳐에서는 이와같은 레이어(모듈)를 구상하는것을 추천한다.Presentation Layer(UI)Domain LayerData Layer각각의 레이어(모듈)에 들어갈 파일들의 특징을 살펴보자면 다음과 같다.features/ # 각 기능별 모듈 (Todo와 같은)│ ├── todo/ # Todo 기능 (예시)│ │ ├── data/ # 데이터 레이어│ │ │ ├── models/ # API 응답 모델, DB 모델│ │ │ ├── sources/ # 데이터 소스 (API, DB)│ │ │ └── repositories/ # 실제 Repository 구현체들│ │ ├── domain/ # ..