Flutter의 ThemeData
Flutter에서 ThemeData 클래스는 위젯이 아니라 머티리얼 디자인 테마에 대한 색상과 타이포그래피 값을 저장하는 클래스입니다. 이 클래스를 사용하여 앱의 전반적인 시각적 테마를 정의할 수 있습니다. ThemeData를 맞춤 설정함으로써, 앱 전체에 걸쳐 일관된 모양과 느낌을 제공할 수 있습니다. 다음은 그 주요 측면들입니다:
ThemeData의 목적
- 일관성: 색상, 글꼴 스타일, 아이콘 테마 등과 같은 모든 일반적인 테마 관련 속성을 정의할 수 있는 중앙 장소를 제공함으로써 앱 전체에 걸쳐 시각적 일관성을 보장합니다.
- 유연성: 앱의 외관에 쉽게 변경 및 조정을 할 수 있습니다. 전체 앱이나 개별 화면의 테마를 조정할 수 있습니다.
자주 사용되는 속성들
ThemeData에는 다양한 속성이 포함되어 있습니다. 가장 흔히 사용되는 속성은 다음과 같습니다:
- primaryColor: 앱의 주요 부분(툴바, 탭 등)의 배경색상입니다.
- accentColor: 버튼, 텍스트 필드 등의 강조 요소에 사용할 색상입니다.
- textTheme: 앱 내 텍스트의 기본 스타일을 정의합니다.
- appBarTheme: AppBar 위젯에 대한 특정 테마입니다.
- buttonTheme: 앱 내 버튼의 기본 레이아웃과 색상을 정의합니다.
- iconTheme: 앱 내 아이콘의 기본 색상과 크기를 지정합니다.
예시 사용법
일반적으로 앱의 루트에서 ThemeData를 정의하며, 앱 전체에 적용됩니다. 기본 예시는 다음과 같습니다:
MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.amber,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.black),
bodyText2: TextStyle(color: Colors.grey),
),
),
home: MyHomePage(),
)이 예제에서 primaryColor는 파란색으로, accentColor는 호박색으로 설정되어 있으며, textTheme 아래에서 두 가지 텍스트 스타일이 정의됩니다.
특정 컴포넌트에 대한 테마 지정
앱의 특정 부분에 대해 테마를 재정의할 수도 있습니다. 예를 들어, 특정 화면에 다른 테마를 사용하려면 다음과 같습니다:
Theme(
data: Theme.of(context).copyWith(
primaryColor: Colors.green,
),
child: Scaffold(
appBar: AppBar(
title: Text('Custom Themed AppBar'),
),
body: // 여기에 본문 내용
),
)여기서 Theme.of(context)는 현재 테마를 가져오는 데 사용되며, copyWith는 특정 속성을 수정하는 데 사용됩니다.
Flutter의 AppBarTheme
Flutter의 AppBarTheme는 애플리케이션 전체에서 AppBar 위젯의 모양을 사용자 지정하는 데 특별히 사용되는 테마 데이터 클래스입니다. 전체 테마 데이터의 일부이며 앱에서 사용되는 모든 앱바의 기본 스타일과 동작을 정의할 수 있습니다. 앱바 테마를 사용하면 각 앱바의 스타일을 개별적으로 지정할 필요 없이 여러 화면에서 일관된 테마를 유지할 수 있습니다.
import 'package:flutter/material.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:tiktok_clone/features/authentication/sign_up_screen.dart';
void main() {
runApp(const TikTokApp());
}
class TikTokApp extends StatelessWidget {
const TikTokApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'TikTok Clone',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: const Color(0xFFE9435A),
appBarTheme: const AppBarTheme(
foregroundColor: Colors.black,
backgroundColor: Colors.white,
elevation: 0,
titleTextStyle: TextStyle(
color: Colors.black,
fontSize: Sizes.size16 + Sizes.size2,
fontWeight: FontWeight.w600,
),
),
),
home: const SignUpScreen(),
);
}
}AppBarTheme은 Flutter에서 AppBar 위젯의 외관을 맞춤 설정하기 위해 사용되는 테마 데이터 클래스입니다. 이는 전체 ThemeData의 일부로, 앱 전체의 모든 AppBar에 대한 기본 스타일링과 동작을 정의할 수 있습니다. AppBarTheme을 사용하면 각각의 AppBar를 개별적으로 스타일링하지 않고도 다양한 화면에서 일관된 테마를 보장할 수 있습니다.
AppBarTheme의 주요 속성
- color: 앱 바의 기본 색상을 정의합니다.
- brightness: AppBar의 내용물의 밝기를 결정합니다. 이는 AppBar 내의 텍스트와 아이콘, 특히 상태 표시줄 텍스트와 아이콘의 색상에 영향을 미칩니다.
- elevation: AppBar의 높이를 설정하며, AppBar 아래에 표시되는 그림자에 영향을 줍니다.
- shadowColor: AppBar 아래의 그림자 색상을 지정합니다.
- centerTitle: 제목이 중앙에 배치될지 여부를 결정합니다.
- titleSpacing: AppBar의 제목 위젯 주변의 간격을 설정합니다.
- iconTheme: AppBar 내의 아이콘(예: 선행 뒤로 가기 아이콘)에 대한 기본 스타일을 지정합니다.
- actionsIconTheme: AppBar에서 작업 아이콘의 기본 스타일을 정의합니다.
- textTheme: AppBar 내의 텍스트에 대한 기본 텍스트 테마를 설정합니다.
- titleTextStyle: AppBar의 제목에 있는 텍스트의 스타일을 지정합니다.
- toolbarTextStyle: AppBar의 툴바에 있는 기타 텍스트의 스타일을 지정합니다.
- systemOverlayStyle: AppBar 위에 겹치는 시스템 오버레이(예: 상태 표시줄)의 스타일을 정의합니다.
사용 예시
앱의 메인 테마 데이터 내에서 AppBarTheme을 정의하면 앱의 모든 AppBar에 자동으로 적용됩니다. 예를 들면 다음과 같습니다:
MaterialApp(
theme: ThemeData(
appBarTheme: AppBarTheme(
color: Colors.blue,
elevation: 2,
brightness: Brightness.dark,
iconTheme: IconThemeData(color: Colors.white),
textTheme: TextTheme(
headline6: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
home: MyHomePage(),
)이 예제에서 앱의 모든 AppBar는 파란색, 2의 그림자 높이, 어두운 밝기(상태 표시줄의 텍스트 및 아이콘에 영향을 줌), 흰색 아이콘 및 특정 텍스트 테마를 가집니다.
AppBarTheme을 이와 같이 사용하면 앱의 시각적 측면에서 일관성을 유지하고 AppBar의 외관에 대한 전역 변경 사항을 쉽게 적용할 수 있습니다.
