테마

테마란 무엇인가?

Flutter에서 테마는 앱의 전체적인 시각적 스타일을 정의하는 방법이다.

색상, 글꼴, 위젯 스타일 등 다양한 디자인 요소를 중앙에서 관리할 수 있게 해준다.

테마를 사용하면 일관된 디자인을 쉽게 유지하고, 앱의 전체적인 모습을 빠르게 변경할 수 있다.

 

 

ThemeData 클래스 이해하기

Flutter의 테마는 ThemeData 클래스를 통해 정의된다. 이 클래스는 다음과 같은 주요 속성들을 포함한다:

• primaryColor: 앱의 주 색상
• colorScheme: 앱의 색상 테마를 정의하는 데 사용된다. 주요 색상과 보조 색상을 설정하여 일관된 디자인을 유지할 수 있다.
• fontFamily: 기본 글꼴
• textTheme: 텍스트 스타일 모음
• buttonTheme: 버튼 스타일
• appBarTheme: 앱 바 스타일

 

예를 들어:

 

 

테마 설정의 기본: MaterialApp

Flutter 앱에서 테마를 설정하는 첫 단계는 MaterialApp 위젯의 theme 속성을 사용하는 것이다.

main.dart 파일의 코드에 정의된 MaterialApp 위젯의 theme 속성을 제공해준다:

이렇게 설정된 테마는 앱 전체에 적용되며, 모든 자식 위젯에서 사용할 수 있다.

 

 

ThemeData 클래스 활용하기

ThemeData 클래스는 앱의 시각적 테마를 정의하는 데 사용된다.

이 클래스를 통해 색상, 글꼴, 텍스트 스타일 등 다양한 디자인 요소를 설정할 수 있다.

 

글꼴 설정: fontFamily

fontFamily 속성을 사용하여 앱 전체의 기본 글꼴을 설정할 수 있다:

이 설정은 별도로 글꼴을 지정하지 않은 모든 텍스트에 'sunflower' 글꼴을 적용한다.

다른 글꼴을 설정하고 싶다면 TextStyle에서 fontFamily를 따로 지정해주면 된다.

 

 

텍스트 스타일 정의: textTheme

textTheme 속성을 사용하여 앱에서 사용할 다양한 텍스트 스타일을 정의할 수 있다:

여기서 네 가지 다른 텍스트 스타일을 정의하고 있다:

• displayLarge: 큰 제목용 (예: "U&I")
• displayMedium: 중간 크기 제목용 (예: "D+1")
• bodyLarge: 큰 본문 텍스트용 (예: "우리 처음 만난 날")
• bodyMedium: 중간 크기 본문 텍스트용 (예: "2024.09.08")

각 스타일은 색상, 글꼴 크기, 글꼴 종류 등을 지정할 수 있다.

 

 

테마 사용하기: Theme.of(context)

정의된 테마를 사용하려면 Theme.of(context) 메서드를 사용한다.

예시: 

Theme.of(context).textTheme 코드가 중복되기 때문에, 따로 build() 함수안에 textTheme 변수를 만들어서 치환해준다. 

 그리고 텍스트 스타일을 설정할 때, Theme.of(context).textTheme 코드가 아니라 textTheme 변수를 불러와준다. 

 

 

실제 적용 예시

_Top 클래스에서 테마가 실제로 어떻게 사용되는지 볼 수 있다:

실행 화면: