InputDecoration
InputDecoration()
- 개별 입력필드에 적용
- icon, prefixIcon, suffixIcon과 같은 아이콘을 설정 가능.
Theme
테마를 설정하면 설정한 것을 디폴트로 스타일이 적용됨.
theme:ThemeData( inputDecorationTheme: InputDecorationTheme( :, ) ),InputDecorationTheme 함수
- 입력 필드 관련
주요 파라미터
border:
- 입력 필드의 기본 테두리 스타일 설정.
enabledBorder:
- 입력필드 활성화시 만 테두리 설정.
- OutlineInputBorder() 위젯은 상하좌우 테두리
- UnderlineInputBorder() 위젯은 하단 테두리
- InputBorder.none 위젯 쓰면 테두리를 없앰
위젯들 안에서 border 두께, 색상 커스터마이징 가능focusedBorder:
- 포커스된 입력 필드의 테두리 스타일 설정.
errorBorder:
- 에러 상태의 입력 필드 테두리 스타일 설정.
disabledBorder:
- 비활성화된 입력 필드의 테두리 스타일 설정.
focusedErrorBorder:
- 포커스된 에러 상태의 입력 필드 테두리 스타일 설정.
labelStyle:
- 입력 필드의 레이블 텍스트 스타일 설정.
helperStyle:
- 헬퍼 텍스트의 스타 설정.
hintStyle:
- 힌트 텍스트의 스타일 설정.
errorStyle:
- 에러 텍스트의 스타일 설정.
prefixStyle:
- 프리픽스 텍스트의 스타일 설정.
suffixStyle:
- 서픽스 텍스트의 스타일 설정.
counterStyle:
- 카운터 텍스트의 스타일 설정.
fillColor:
- 입력 필드의 배경 색상 설정.
filled:
- 입력 필드가 채워져 있는지 여부 설정.
contentPadding:
- 입력 필드의 내부 여백(padding) 설정.
isDense:
- 입력 필드의 밀집도 설정.
alignLabelWithHint:
- 힌트와 레이블 텍스트의 정렬 설정.
floatingLabelBehavior:
- 레이블 텍스트가 떠있는(floating) 방식의 동작 설정.
색상 및 배경 관련
primaryColor: 앱의 주요 색상.
primaryColorBrightness: 주요 색상의 밝기.
primaryColorLight: 주요 색상의 밝은 변형.
primaryColorDark: 주요 색상의 어두운 변형.
accentColor: 강조 색상.
accentColorBrightness: 강조 색상의 밝기.
canvasColor: 스크린의 기본 배경 색상.
shadowColor: 그림자 색상.
scaffoldBackgroundColor: 스캐폴드 위젯의 배경 색상.
bottomAppBarColor: 바텀 앱바의 색상.
cardColor: 카드 위젯의 배경 색상.
dividerColor: 구분선 색상.
focusColor: 포커스된 요소의 색상.
hoverColor: 호버된 요소의 색상.
highlightColor: 하이라이트 색상.
splashColor: 스플래시 효과 색상.
selectedRowColor: 선택된 행의 색상.
unselectedWidgetColor: 선택되지 않은 위젯의 색상.
disabledColor: 비활성화된 요소의 색상.
buttonColor: 버튼 색상.
secondaryHeaderColor: 두 번째 헤더 색상.
backgroundColor: 배경 색상.
dialogBackgroundColor: 다이얼로그의 배경 색상.
indicatorColor: 탭바 인디케이터 색상.
hintColor: 힌트 텍스트의 색상.
errorColor: 에러 텍스트의 색상.
텍스트 스타일 관련
textTheme: 기본 텍스트 스타일.
primaryTextTheme: 주요 색상에 대한 텍스트 스타일.
accentTextTheme: 강조 색상에 대한 텍스트 스타일.
inputDecorationTheme: 입력 필드 스타일.
버튼 스타일 관련
buttonTheme: 버튼 스타일.
textButtonTheme: 텍스트 버튼 스타일.
elevatedButtonTheme: 엘리베이티드 버튼 스타일.
outlinedButtonTheme: 아웃라인 버튼 스타일.
아이콘 스타일 관련
iconTheme: 기본 아이콘 스타일.
primaryIconTheme: 주요 색상에 대한 아이콘 스타일.
accentIconTheme: 강조 색상에 대한 아이콘 스타일.
앱바 스타일 관련
appBarTheme: 앱바 스타일.
탭바 스타일 관련
tabBarTheme: 탭바 스타일.
플로팅 액션 버튼 스타일 관련
floatingActionButtonTheme: 플로팅 액션 버튼 스타일.
다이얼로그 스타일 관련
dialogTheme: 다이얼로그 스타일.
카드 스타일 관련
cardTheme: 카드 스타일.
드로어 스타일 관련
drawerTheme: 드로어 스타일.
데이터 테이블 스타일 관련
dataTableTheme: 데이터 테이블 스타일.
리스트 타일 스타일 관련
listTileTheme: 리스트 타일 스타일.
스낵바 스타일 관련
snackBarTheme: 스낵바 스타일.
바텀 시트 스타일 관련
bottomSheetTheme: 바텀 시트 스타일.
확장 타일 스타일 관련
expansionTileTheme: 확장 타일 스타일.
기타 스타일 관련
dividerTheme: 구분선 테마.
bottomNavigationBarTheme: 바텀 내비게이션 바 테마.
bottomAppBarTheme: 바텀 앱바 테마.
chipTheme: 칩 위젯 테마.
sliderTheme: 슬라이더 위젯 테마.
switchTheme: 스위치 위젯 테마.
radioTheme: 라디오 버튼 테마.
checkboxTheme: 체크박스 테마.
tooltipTheme: 툴팁 위젯 테마.
ThemeData를 사용하여 앱의 전반적인 스타일을 설정하면, 일관된 UI 디자인을 유지할 수 있으며, 유지보수가 용이하다.
