Flutter DateRangePicker의 날짜 범위 텍스트 폰트 크기 조정 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

• Flutter 앱 개발자, UI/UX 커스터마이징이 필요한 개발자
• 중간 수준의 Flutter 이해도를 가진 개발자

핵심 요약

• builder 함수를 사용해 Theme를 오버라이딩하여 날짜 범위 텍스트 스타일 변경
• textTheme 속성 내 headlineLarge, bodyLarge, bodySmall, labelLarge를 통해 각 텍스트 요소 폰트 크기 조정
• TextStyle 객체를 사용해 폰트 가중치, 가족, 색상 등 추가 커스터마이징 가능

섹션별 세부 요약

1. 문제 상황

• Flutter의 DateRangePicker 기본 UI에서 날짜 범위 텍스트가 너무 커서 캘린더 아이콘과 겹침
• UI 개선을 위해 커스텀 테마 적용 필요

2. 해결 방법

• showDateRangePicker 함수에 builder 매개변수를 추가하여 Theme 오버라이딩
• builder 내부에서 ThemeData를 복사 및 커스터마이징
• textTheme 속성으로 텍스트 스타일 제어

3. 텍스트 스타일 속성

• headlineLarge: "Date Range" 텍스트
• bodyLarge: 시작/종료 라벨 텍스트
• bodySmall: 오류 메시지 텍스트
• labelLarge: 도움말/확인/취소 텍스트

4. 전체 코드 예시

• builder 내부에서 TextTheme를 직접 정의하여 각 텍스트 요소의 fontSize 및 fontWeight 설정
• error 색상, dialogTheme 등 추가 커스터마이징 가능

결론

• Flutter의 DateRangePicker UI를 커스터마이징하려면 builder와 TextTheme를 활용해야 함
• headlineLarge, bodyLarge 등 4가지 텍스트 스타일 속성을 통해 폰트 크기 및 스타일 조정 가능
• TextStyle을 통해 폰트 가중치, 색상, 가족 등 다양한 속성 추가 가능