Flutter 앱 디자인 테마 고급 설정: ThemeData() 파라미터 심층 분석

이번 글에서는 앱 디자인 테마를 보다 세밀하게 설정할 수 있는 ThemeData 객체의 핵심 파라미터 3가지, 즉 colorScheme, bottomNavigationBarTheme, useMaterial3에 대해 심층적으로 분석하고 실제 코드 예시를 통해 이해를 돕겠습니다.

1. colorScheme: 앱의 색상 체계 설정

colorScheme 파라미터는 앱에서 사용되는 다양한 색상을 정의하는 데 사용됩니다. 기본 색상 뿐만 아니라 다양한 상태에 따라 사용되는 색상을 설정할 수 있습니다.

주요 속성:

• primary: 앱의 주요 색상
• onPrimary: 주요 색상 위에 표시되는 텍스트 색상
• secondary: 앱의 보조 색상
• onSecondary: 보조 색상 위에 표시되는 텍스트 색상
• error: 오류 메시지 등에 사용되는 색상
• onError: 오류 색상 위에 표시되는 텍스트 색상
• background: 앱 배경 색상
• onBackground: 배경 색상 위에 표시되는 텍스트 색상
• surface: 위젯 배경 색상
• onSurface: 위젯 배경 색상 위에 표시되는 텍스트 색상

ThemeData(
  colorScheme: ColorScheme.light(
    primary: Colors.blue,
    onPrimary: Colors.white,
    secondary: Colors.green,
    onSecondary: Colors.black,
  ),
)

위 코드는 밝은 테마를 사용하는 앱 디자인 테마를 정의하며, 주요 색상은 파란색, 보조 색상은 초록색으로 설정합니다.

 

2. bottomNavigationBarTheme: 하단 네비게이션 바 테마 설정

bottomNavigationBarTheme 파라미터는 앱 하단에 표시되는 네비게이션 바의 테마를 설정하는 데 사용됩니다.

주요 속성:

• backgroundColor: 네비게이션 바 배경 색상
• selectedItemColor: 선택된 항목의 색상
• unselectedItemColor: 선택되지 않은 항목의 색상
• selectedLabelStyle: 선택된 항목 텍스트 스타일
• unselectedLabelStyle: 선택되지 않은 항목 텍스트 스타일

ThemeData(
  bottomNavigationBarTheme: BottomNavigationBarThemeData(
    backgroundColor: Colors.blue,
    selectedItemColor: Colors.white,
    unselectedItemColor: Colors.grey,
  ),
)

위 코드는 하단 네비게이션 바 배경 색상을 파란색, 선택된 항목 색상을 흰색, 선택되지 않은 항목 색상을 회색으로 설정합니다.

3. useMaterial3: Material 3 디자인 적용

useMaterial3 파라미터는 Flutter 3.0에서 도입된 새로운 Material 3 디자인 시스템을 앱에 적용할지 여부를 설정합니다. Material 3 디자인은 더욱 입체적이고 표현력이 풍부한 디자인을 제공합니다.

기본값: false

ThemeData(
  useMaterial3: true,
)

위 코드는 앱에 Material 3 디자인 시스템을 적용합니다.